Nostradamus Predicting Maelstroms

    react-hamburger-menu
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-hamburger-menu package

    1.2.1 • Public • Published

    React Hamburger Menu

    Built for React, this is a handy UI component for a menu icon in a mobile site or application.

    Installation

    react-hamburger-menu requires React 0.14 or later.

    npm install --save react-hamburger-menu
    

    Demo & Example

    Live demo: cameronbourke.github.io/react-hamburger-menu

    To build the example locally, clone this repo then run:

    npm install
    npm start
    Then open localhost:8080 in a browser.
    

    Usage

    React Hamburger Menu only has two required props. They are isOpen and menuClicked. The other 7 props are optional.

    menuClicked

    Note: This prop is passed a function. This function will be invoked when the component is clicked. The function should responsible for updating the state that is passed to isOpen. The function passed to menuClicked could look something like the following:

    handleClick() {
        this.setState({
            open: !this.state.open
        });
    }

    An example use of React Hamburger Menu looks like:

    <HamburgerMenu
        isOpen={this.state.open}
        menuClicked={this.handleClick.bind(this)}
        width={18}
        height={15}
        strokeWidth={1}
        rotate={0}
        color='black'
        borderRadius={0}
        animationDuration={0.5}
    />

    Note, not all props are required. All the props besides isOpen and menuClicked have defaults.

    Options

    Property Type Default Description
    isOpen bool undefined determines whether the menu is a hamburger or cross icon
    menuClicked func undefined will be invoked when the component is clicked
    width number 36 the width of the icon
    height number 30 the height of the icon
    strokeWidth number 2 the stroke width of the lines
    rotate number 0 the rotation of the icon, eg {45} would be 45deg
    color string #000 the color of both icons
    borderRadius number 0 the border radius of the lines
    animationDuration number 0.4 the length of time it takes for the icon transitions to complete.
    className string undefined the class name for the container element

    Todo

    • Add Unit Tests

    License

    MIT Licensed Copyright (c) Cameron Bourke 2016

    Install

    npm i react-hamburger-menu

    DownloadsWeekly Downloads

    7,905

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    56.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • cameronbourke