<NME> README.md
<BEF> <img width="645" alt="screenshot 2018-10-31 at 13 32 57" src="https://user-images.githubusercontent.com/5574267/47815610-1806fa00-dd51-11e8-981b-2f680244ae29.png">

![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)

# ⚠️ TRY THE V4 NOW [HERE](https://fkhadra.github.io/react-contexify/).
If you still view the old version, open the console and clear your service worker

```js
ns().then(function(registrations) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
 for(let registration of registrations) {
  registration.unregister()
} })
```


![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)

## Documentation

</div>


## 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 React from 'react';
import { Menu, Item, Separator, Submenu, MenuProvider, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {
  const { show } = useContextMenu({
    id: MENU_ID,
  });

  function handleContextMenu(event){
      event.preventDefault();
      show(event, {
        props: {
            key: 'value'
        }
      })
  }
  const handleItemClick = ({ event, props }) => console.log(event,props);

  return (
    <div>
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item onClick={handleItemClick}>Item 1</Item>
      <Item onClick={handleItemClick}>Item 2</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item onClick={handleItemClick}>Sub Item 1</Item>
        <Item onClick={handleItemClick}>Sub Item 2</Item>
      </Submenu>
    </Menu>
    </div>
  );
}
```

## Contribute

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

## License

React Contexify is licensed under MIT. 

<MSG> Remove v4 mention

<DFF> @@ -2,18 +2,6 @@
 
 ![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)
 
-# ⚠️ TRY THE V4 NOW [HERE](https://fkhadra.github.io/react-contexify/).
-If you still view the old version, open the console and clear your service worker
-
-```js
-ns().then(function(registrations) {
-navigator.serviceWorker.getRegistrations().then(function(registrations) {
- for(let registration of registrations) {
-  registration.unregister()
-} })
-```
-
-
 ![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)
 
 ## Documentation

{'commit': 'diff --git a/README.md b/README.md\nindex 61313d8..c11571b 100644\n--- a/README.md\n+++ b/README.md\n@@ -2,18 +2,6 @@\n \n ![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)\n \n-# ⚠️ TRY THE V4 NOW [HERE](https://fkhadra.github.io/react-contexify/).\n-If you still view the old version, open the console and clear your service worker\n-\n-```js\n-ns().then(function(registrations) {\n-navigator.serviceWorker.getRegistrations().then(function(registrations) {\n- for(let registration of registrations) {\n-  registration.unregister()\n-} })\n-```\n-\n-\n ![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)\n \n ## Documentation\n', 'commit_subject': 'Remove v4 mention', 'repo_name': 'fkhadra/react-contexify', 'committer': {'name': 'Fadi Khadra', 'email': 'fe880fa64550e16b4d4d7f97877aeccc87bc9611@gmail.com', 'time_sec': '1541018966', 'tz_offset': '60', 'date': {'seconds': '1541018966'}}, 'commit_tree': '09337ca1d6f21b21c21983290bff195cf72c0ef4', 'commit_message': 'Remove v4 mention\n', 'language_name': 'TypeScript', 'license': 'mit', 'hunks': '@@ -2,18 +2,6 @@\n \n ![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)\n \n-# ⚠️ TRY THE V4 NOW [HERE](https://fkhadra.github.io/react-contexify/).\n-If you still view the old version, open the console and clear your service worker\n-\n-```js\n-ns().then(function(registrations) {\n-navigator.serviceWorker.getRegistrations().then(function(registrations) {\n- for(let registration of registrations) {\n-  registration.unregister()\n-} })\n-```\n-\n-\n ![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)\n \n ## Documentation\n', 'addition_count': 0, 'deletion_count': 12, 'src_file': 'a/README.md', 'tgt_file': 'b/README.md', 'file_extension': '.md', 'before_file': '<img width="645" alt="screenshot 2018-10-31 at 13 32 57" src="https://user-images.githubusercontent.com/5574267/47815610-1806fa00-dd51-11e8-981b-2f680244ae29.png">\n\n![Build Status](https://travis-ci.org/fkhadra/react-contexify.svg?branch=master) [![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)]() [![Coverage Status](https://coveralls.io/repos/github/fkhadra/react-contexify/badge.svg?branch=master)](https://coveralls.io/github/fkhadra/react-contexify?branch=master)\n\n# ⚠️ TRY THE V4 NOW [HERE](https://fkhadra.github.io/react-contexify/).\nIf you still view the old version, open the console and clear your service worker\n\n```js\nns().then(function(registrations) {\nnavigator.serviceWorker.getRegistrations().then(function(registrations) {\n for(let registration of registrations) {\n  registration.unregister()\n} })\n```\n\n\n![readme-ctx](https://user-images.githubusercontent.com/5574267/29753912-43c54008-8b7b-11e7-9627-258fde1ffddd.gif)\n\n## Documentation\n\n</div>\n\n\n## Documentation\n\nGo [here](https://fkhadra.github.io/react-contexify). \n\n## Installation\n\nUsing yarn\n\n```sh\n$ yarn add react-contexify\n```\n\nUsing npm\n\n```sh\n$ npm install --save react-contexify\n```\n\n## The gist\n\n```js\nimport React from \'react\';\nimport { Menu, Item, Separator, Submenu, MenuProvider, useContextMenu } from \'react-contexify\';\nimport \'react-contexify/dist/ReactContexify.css\';\n\nconst MENU_ID = \'blahblah\';\n\nfunction App() {\n  const { show } = useContextMenu({\n    id: MENU_ID,\n  });\n\n  function handleContextMenu(event){\n      event.preventDefault();\n      show(event, {\n        props: {\n            key: \'value\'\n        }\n      })\n  }\n  const handleItemClick = ({ event, props }) => console.log(event,props);\n\n  return (\n    <div>\n    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  \n    <Menu id={MENU_ID}>\n      <Item onClick={handleItemClick}>Item 1</Item>\n      <Item onClick={handleItemClick}>Item 2</Item>\n      <Separator />\n      <Item disabled>Disabled</Item>\n      <Separator />\n      <Submenu label="Foobar">\n        <Item onClick={handleItemClick}>Sub Item 1</Item>\n        <Item onClick={handleItemClick}>Sub Item 2</Item>\n      </Submenu>\n    </Menu>\n    </div>\n  );\n}\n```\n\n## Contribute\n\nAny idea and suggestions are welcome. Please have a look at the contributing guide.\n\n## License\n\nReact Contexify is licensed under MIT. \n', 'message': 'Remove v4 mention\n', 'author_name': 'Fadi Khadra', 'lang': 'md'}