Skip to content
A lightweight React library for context menus
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example doc: update example styles Dec 17, 2019
src chore: do not useCallback for Menu rendering Dec 19, 2019
.gitignore feat: add example/ Dec 5, 2019
.npmignore fix: do not publish log files Dec 17, 2019
.travis.yml initial commit Dec 5, 2019
CODE_OF_CONDUCT.md initial commit Dec 5, 2019
CONTRIBUTING.md initial commit Dec 5, 2019
README.md feat: use hooks to manage menu state Dec 6, 2019
TODO.md feat: add example/ Dec 5, 2019
index.js initial commit Dec 5, 2019
jest.config.js initial commit Dec 5, 2019
jest.setup.ts initial commit Dec 5, 2019
package.json
tsconfig.json initial commit Dec 5, 2019
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.