React-Hamburger

A simple and fully customizable hamburger menu for React.

Installation

npm install react-hamburger --save
# or
yarn add react-hamburger

---

Usage

{ ReactHamburger }

// ES6 syntax
import { ReactHamburger } from 'react-hamburger';

// ES5 syntax
const { ReactHamburger } = require('react-hamburger');

After importing the component, simply render in the typical React manner.

// stateless component
const HamburgerMenu = () => {
  return (
    <ReactHamburger />
  );
};

// class-based component
class HamburgerMenu extends React.Component {
  render() {
    return (
      <ReactHamburger />
    );
  }
}

{ topBarHeight }

// ES6 syntax
import { topBarHeight } from 'react-hamburger';

// ES5 syntax
const { topBarHeight } = require('react-hamburger');

react-hamburger gives access to the default theme's topBarHeight. This property allows for styling modifications to be made based on the height. If you pass your own height to ReactHamburger either through the theme or prop you will still be able to access topBarHeight but it won't be of much value anymore.

---

Props

Most props can either be directly passed through the ReactHamburger component or, where it exists, through the corresponding theme key.

The barCount, and TopContent props cannot be passed through the theme object.

If you pass a prop and use the theme, the prop will take precedence.

children

Passing in this.props.children will render content in the LinkContainer (i.e. the slide-in-out sidebar).

Theme

Name	Type	Units	Description	Default	theme key
theme	Theme	N/A	theme object that can be passed to react-hamburger rather than passing individual props. The object and the keys can be seen in Custom Types	Theme	N/A

HamburgerIcon

The icon that the user clicks to show or hide the LinkContainer.

Name	Type	Units	Description	Default	theme key
barColor	string	N/A	Color of the HamburgerIcon bars	#FF9900	bars.color
barCount	number	N/A	Number of bars in the HamburgerIcon	3	N/A
barHeight	number	px	Height of the individual HamburgerIcon bars	5	bars.height
barRadius	number	px	Curvature of the HamburgerIcon bars	5	bars.radius
hamburgerHeight	number	px	Height of the HamburgerIcon	40	hamburger.dimensions
hamburgerWidth	number	px	Width of the HamburgerIcon	40	hamburger.dimensions
inline	boolean	N/A	Whether the HamburgerIcon and any TopContent should take up space on the main page	false	hamburger.inline
locked	boolean	N/A	Whether to lock the HamburgerIcon and TopBar to the top of the screen	false	topBar.locked
slide	boolean	N/A	Whether the HamburgerIcon should slide out with the LinkContainer	false	hamburger.slide
right	boolean	N/A	Whether the HamburgerIcon should be on the right side of the screen	false	hamburger.location

LinkContainer

The component that holds the links (or whatever content the developer wants) that will show or hide when the user clicks on the HamburgerIcon

Name	Type	Units	Description	Default	theme key
linkContainerColor	string	N/A	Color of the LinkContainer	#123456	linkContainer.color
linkContainerMaxWidth	number	px	Maximum width the LinkContainer will cover the screen	300	linkContainer.maxWidth
linkContainerPadding	number	px	External padding around the outside of the LinkContainer	10	linkContainer.padding
linkContainerSpeed	number	seconds	Speed (in seconds) that the LinkContainer slides in and out	0.5	linkContainer.speed
linkContainerTransition	Transition	N/A	Transition type for the LinkContainer	ease	linkContainer.transition
linkContainerWidth	number	%	Width that the LinkContainer will take, up to it's maxWidth	75	linkContainer.width
verticalSlide	boolean	N/A	Whether the slider should slide from the top	false	linkContainer.vertical

TopBar

Name	Type	Units	Description	Default	theme key
showTopBar	boolean	N/A	Whether or not to render a TopBar. Gives access to other topBar* props.	false	topBar.display
topBarColor	string	N/A	Color of the top bar that holds the HamburgerIcon and any other contents placed inside the TopBar	#111111	topBar.color
topBarHeight	number	px	Height of the bar that holds the HamburgerIcon and any other contents placed inside the TopBar	60	topBar.height
topBarGutter	number	px	Space between the contents of the HamburgerIcon and the edge of the screen	0	topBar.gutter
TopContent	React.Node	N/A	Any content to render alongside the HamburgerIcon	null	N/A

---

Types

In some instances, the prop type and the Theme type are different. Refer to the above tables and Theme type listed below to ensure you are passing the correct prop-type.

Custom Types

type Theme = {
  bars: {
    color: string,
    height: number,
    radius: number,
  },
  hamburger: {
    dimensions: number,
    inline: boolean,
    location: string,
    slide: boolean,
  },
  linkContainer: {
    color: string,
    maxWidth: number,
    padding: number,
    speed: number,
    transition: string,
    vertical: boolean,
    width: number,
  },
  topBar: {
    color: string,
    display: boolean,
    height: number,
    gutter: number,
    locked: boolean,
  },
};

type Transition = 'ease' | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';

---

Theme

The theme object and its default values is listed below (can also be seen in the props tables). If you don't pass a prop to the component or overwrite the key in the theme the default will be used.

const theme = {
  bars: {
    color: '#FF9900',
    height: 5,
    radius: 5,
  },
  hamburger: {
    dimensions: 40,
    inline: false,
    location: 'left',
    slide: false,
  },
  linkContainer: {
    color: '#123456',
    maxWidth: 300,
    padding: 0,
    speed: 0.5,
    transition: 'ease',
    vertical: false,,
    width: 75,
  },
  topBar: {
    color: '#111111',
    display: false,
    height: 60,
    gutter: 10,
    locked: false,
  },
};