https://github.com/fkhadra/react-contexify

👌 Add a context menu to your react app with ease
https://github.com/fkhadra/react-contexify

context-menu dropdown menu popup react react-component

Last synced: 5 days ago
JSON representation

👌 Add a context menu to your react app with ease

• Host: GitHub
• URL: https://github.com/fkhadra/react-contexify
• Owner: fkhadra
• License: mit
• Created: 2016-06-20T06:32:23.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-11-25T01:12:32.000Z (about 2 months ago)
• Last Synced: 2025-01-07T14:07:00.796Z (12 days ago)
• Topics: context-menu, dropdown, menu, popup, react, react-component
• Language: TypeScript
• Homepage: https://fkhadra.github.io/react-contexify/
• Size: 8.34 MB
• Stars: 1,180
• Watchers: 9
• Forks: 121
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome - fkhadra/react-contexify - 👌 Add a context menu to your react app with ease (TypeScript)

README

        


![React-contexify CI](https://github.com/fkhadra/react-contexify/workflows/React-contexify%20CI/badge.svg) [![npm](https://img.shields.io/npm/dm/react-contexify.svg)]() [![npm](https://img.shields.io/npm/v/react-contexify.svg)]() [![license](https://img.shields.io/github/license/fkhadra/react-contexify.svg?maxAge=2592000)]()



![contexify](https://user-images.githubusercontent.com/5574267/100552409-500dfd80-3287-11eb-96ee-fc1d17ef50b8.gif)



## Features

- Easy to set up for real, you can make it work in less than 10sec!

- Super easy to customize thanks to css variables 💅

- Custom position

- Sub menu support

- Does not go offscreen

- Dark mode 🌒

- Keyboard navigation + keyboard shortcut!

- Built-in animations

- Easy to test!

- Written in Typescript 💪

- Tiny! (3k gzipped)

Check the documentation for more!

## Documentation

Go [here](https://fkhadra.github.io/react-contexify). 

## Installation

Using yarn

```sh

$ yarn add react-contexify

```

Using npm

```sh

$ npm install --save react-contexify

```

## The gist

```js

import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';

import 'react-contexify/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {

  const { show } = useContextMenu({

    id: MENU_ID,

  });

  function handleContextMenu(event){

      show({

        event,

        props: {

            key: 'value'

        }

      })

  }

  // I'm using a single event handler for all items

  // but you don't have too :)

  const handleItemClick = ({ id, event, props }) => {

    switch (id) {

      case "copy":

        console.log(event, props)

        break;

      case "cut";

        console.log(event, props);

        break;

      //etc...

    }

  }

  return (

    


    
lorem ipsum blabladhasi blaghs blah
  

    

      Copy

      Cut

      

      Disabled

      

      

        Reload

        Do something else

      

    

    

  );

}

```


## Contribute

Any idea and suggestions are welcome. Please have a look at the contributing guide.

## License

React Contexify is licensed under MIT.