npm.io
1.1.2 • Published 3 years ago

react-header-responsive

Licence
MIT
Version
1.1.2
Deps
0
Size
46 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

npm version license

react-header-responsive

A responsive header menu for React applications with submenu support

Features

  • Menu & Submenu
  • Desktop version
  • Mobile version
  • Tablet support
  • Current link highlighting
  • Custom anchor component support
  • Server-side rendering (SSR) support
  • Overlapping (display invisible header over content)

Installation

npm install react-header-responsive
Usage
Property Description
home Optional. Logo component
pages Optional. An array of objects with name and link, or name and children properties. If children is specified it is an array of objects with name and link properties
access Optional. Access component for login, registration, etc.
anchor Optional. Function with an anchor component
overlap Optional. Whether the header should overlap the content and be invisible
currentPath Required for SSR only. Used only for server-side rendering (SSR) instead of window.location.pathname
Example
import Header from 'react-header-responsive';
import logo from './rhr-logo.png';

function App() {
  const pages = [
    {
      name: 'About',
      link: '/about',
    },
    {
      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
      />
    </>
  );
}
Contributing
  1. Clone repo.
  2. Create / checkout feature/{name}, or fix/{name} branch.
  3. Install deps: npm.
  4. Make your changes.
  5. Commit: git commit.
  6. Push: git push.
  7. Open PR targeting the main branch.

Keywords

reactheader