React-menuit NPM

Menuit 🎶

npm david-dm

A lightweight library to manage context menus for your React application. Just how lightweight is it?

minified size minzipped size

⚠️ Not ready for production use, yet! ⚠️

Installation

$ yarn add react-menuit

Requirements

This library uses React Hooks which requires React 16.8+.

TypeScript

This library utilizes TypeScript and exposes a full set of TypeScript definitions.

Philosophy

Batteries not included - Menuit does not provide out-of-the-box styles and assumes you will provide your own set of styling

Usage

import { MenuProvider, MenuConsumer } from 'react-menuit'

// Wrap the root of your application to provide global menu support
export default () => {
  return (
    <MenuProvider>
      <MenuConsumer>
        {({ openMenu }) => (
          <button onClick={e => openMenu({ x: e.pageX, y: e.pageY }, [
            <a onClick={action1}>Item 1</a>,
            <a onClick={action2}>Item 2</a>,
          ])}>Open Menu</button>
        )}
      </MenuConsumer>
    </MenuProvider>
  )
}