1.0.0 • Published 7 years ago

react-overlay-menu v1.0.0

Weekly downloads
10
License
MIT
Repository
github
Last release
7 years ago

react-overlay-menu

An overlay side menu React component using CSS transitions.

Demo React Overlay Menu

install

yarn add react-overlay-menu -S | npm install react-overlay-menu -S

usage

import React, { Component } from 'react';
import OverlayMenu from 'react-overlay-menu';
import MyMenu from './components/ui/MyMenu';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    return (
      <div>
        <button type="button" onClick={this.toggleMenu}>Open menu</button>
        <OverlayMenu 
          open={this.state.isOpen} 
          onClose={this.toggleMenu}
        >
          <MyMenu />
        </OverlayMenu>
      </div>
    );
  }
}

export default Example;

options

PropTypeDefaultDescription
openboolfalseIs the menu opened or not.
rightboolfalseFix the overlay menu to the right.
onClosefuncundefinedCallback function to close, when click on the overlay.