react-burger-menu

Burger menu for react.

installation

npm install -S @feizheng/react-burger-menu

update

npm update @feizheng/react-burger-menu

properties

| Name | Type | Required | Default | Description | | --------- | ------- | -------- | ------- | ------------------------------------- | | className | string | false | - | The extended className for component. | | value | bool | false | false | The changed value. | | onChange | func | false | noop | The change handler. | | options | object | false | - | Drawer options. | | trigger | func | false | noop | The trigger element. | | extra | element | false | - | The extra element. |

usage

1. import css

@import "~@feizheng/webkit-sassui-backdrop";
@import "~@feizheng/webkit-sassui-drawer";
@import "~@feizheng/react-drawer/dist/style.scss";
@import "~@feizheng/react-burger-menu/dist/style.scss";

// customize your styles:
$react-burger-menu-options: ()

2. import js

import ReactDemokit from '@feizheng/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactBurgerMenu from '@feizheng/react-burger-menu';
import './assets/style.scss';

class App extends React.Component {
  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-burger-menu">
        <ReactBurgerMenu
          trigger={(props) => {
            return (
              <button className="button" {...props}>
                CustomizeTrigger
              </button>
            );
          }}
          onChange={(e) => {
            console.log('status changed:', e.target.value);
          }}>
          <p>
            道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。
          </p>
          <p>故常无欲，以观其妙，常有欲，以观其徼。</p>
          <p>此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。</p>
        </ReactBurgerMenu>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-burger-menu/

license

Code released under the MIT license.