@clipmx/menu

Menu related components

Usage no npm install needed!

<script type="module">
  import clipmxMenu from 'https://cdn.skypack.dev/@clipmx/menu';
</script>

README

Clip Menu

Installation

npm install @clipmx/menu --save

Usage

import React from 'react';
import Button from '@clipmx/button';
import Menu, { MenuItem } from '@clipmx/menu';

class MyComponent extends React.Component {
  state = { anchor: null };

  handleMenuOpen = e => this.setState({ anchor: e.target });

  handleMenuClose = () => this.setState({ anchor: null });

  render() {
    return (
      <div>
        <Button onClick={this.handleMenuOpen}>Open Menu</Button>
        <Menu
          anchorEl={this.state.anchor}
          open={Boolean(this.state.anchor)}
          onClose={this.handleMenuClose}
        >
          <MenuItem>Item 1</MenuItem>
          <MenuItem>Item 1</MenuItem>
          <MenuItem>Item 1</MenuItem>
        </Menu>
      </div>
    );
  }
}

export default MyComponent;

Props

This is a wrapper of the Material-UI Menu, so you can use any props that Material-UI supports.