react-overlay-menu

An overlay side menu React component using CSS transitions.

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

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | open | bool | false | Is the menu opened or not. | | right | bool | false | Fix the overlay menu to the right. | | onClose | func | undefined | Callback function to close, when click on the overlay. |