@feizheng/react-burger-menu

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.