Introducing the Universal Responsive Header for React.js

Have you ever thought about starting your own startup? Almost every startup (and +/- any company) needs a landing page/website. And each site has a header with a navigation menu at the top. Moreover, in our time, it must necessarily be adaptive in order to work equally well both on computers and on mobile phones and tablets.

Why do thousands of front-end developers develop this header every time, spending many hours over and over again, when almost all headers have the same functionality and look? Why is there still no sane library for this port that allows you to solve the problem by connecting only one component without wasting a lot of time? I thought and created npm package for React.js, which is a universal header. I have implemented most of the features that you may need, these are:

  1. Desktop support

  2. Phone support

  3. Tablet support

  4. Support for nested menu lists

  5. Overlapping support (you can display a transparent header on top of the content)

  6. Support for a custom link component

  7. Support for Server-Side Rendering (for Next.js and other frameworks)

Usage react-header-responsive on a real project you can see Here* See screenshots below.

*Desktop version with overlap enabled

*Desktop version with overlap enabled

*Desktop version with overlap enabled and open submenu

*Desktop version with overlap enabled and open submenu

*Mobile version

*Mobile version

I tried to implement the connection of the library as simply as possible, therefore, in order to create links (it is possible with nesting), it is enough just to pass JSON. The minimum setup looks like this:

const pages = [
  {
    name: 'Products',
    children: [
      {
        name: 'Product-1',
        link: '/product1',
      },
      {
        name: 'Product-2',
        link: '/product2',
      },
      {
        name: 'Product-3',
        link: '/product3',
      },
    ],
  },
  {
    name: 'Pricing',
    link: '/pricing',
  },
];

<Header
  pages={pages}
  home={<img src={logo} alt="RHR logo" />}
  access={<Access />}
/>

Where:

pages – an array of page objects containing the properties “name” and “link” for the link, and “name” and “children” for the nested menu/list.

home – logo / home link.

access – component with links to authorization/registration.

A more advanced version includes a custom link component and an “overlap” property to display a transparent header over the content (potentially an image):

<Header
  home={<img src={logo} alt="RHR logo" />}
  pages={pages}
  anchor={(link, name, className) => (
    <Link href={link} className={className}>
      {name}
    </Link>
  )}
  access={<Access />}
  overlap
/>

The custom link component is passed to the function, so it doesn’t matter what props it has and it can be customized in the function itself.

To install the component, just run the command:

npm install react-header-responsive

The full code with the library connection looks like this:

import Header from 'react-header-responsive';
import logo from './rhr-logo.png';

function App() {
  const pages = [
    {
      name: 'Products',
      children: [
        {
          name: 'Product-1',
          link: '/product1',
        },
        {
          name: 'Product-2',
          link: '/product2',
        },
        {
          name: 'Product-3',
          link: '/product3',
        },
      ],
    },
    {
      name: 'Pricing',
      link: '/pricing',
    },
  ];
  
  const Access = () => {
    return (
      <div>
        <button>Sign Up</button>
        <button>Sign In</button>
      </div>
    );
  };

  return (
    <>
      <Header
        home={<img src={logo} alt="RHR logo" />}
        pages={pages}
        anchor={(link, name, className) => (
          <Link href={link} className={className}>
            {name}
          </Link>
        )}
        access={<Access />}
        overlap
      />
    </>
  );
}

In general, the library covers most of the requirements for headers and is easily colored / styled.

This is where the library is located.

I would be grateful if you put an asterisk 🙂

I hope that my library will help make your work a little more comfortable and enjoyable, and startup hypotheses will be tested faster 🙂

* The Meta organization, as well as its Instagram and Facebook products, are recognized as extremist in the Russian Federation.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *