Skip to content
A lightweight React library for context menus
TypeScript CSS JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.gitignore
.npmignore
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
README.md
TODO.md
index.js
jest.config.js
jest.setup.ts
package.json
tsconfig.json
yarn.lock

README.md

Menuit 🎶

npm david-dm Build Status

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>
  )
}

License

MIT

You can’t perform that action at this time.