open-index/open-npm huggingface dataset:
npm package: @rebelchris/react-contexify
Description: Add contextmenu to your react component with ease
Author: Fadi Khadra
Latest version: 5.0.0

<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">

![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)]()

<div style="text-align:center">

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

</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.
npm package: @rebelcode/babel-plugin-injectable
Description: Adds injection markers and parameters list to instances marked as injectable
Author: RebelCode
Latest version: 0.0.2

# Babel Plugin Injectable
Adds ability to mark objects as `injectable` so the DI container can automatically create instances and resolve dependencies. This plugin also adds the list of function (or constructor params) to the marked object. So the DI container shouldn't do in runtime.
## Install
Run:
```
$ npm install --save-dev @rebelcode/plugin-injectable
```

And add `@rebelcode/plugin-injectable` plugin to your `.babelrc`
## Details

After applying the plugin this code:
```js
/**
 * @injectable
 */
export default function makeAdder (addService) {
  return (a, b) => addService.add(a, b)
}
```

Becomes this during transpilation:
```js
/**
 * @injectable
 */
const makeAdder = function makeAdder(addService) {
  return (a, b) => addService.add(a, b);
};
makeAdder.$injectParams = {
  "addService": {
    "from": "addService"
  }
};
makeAdder.$injectable = true;
export default makeAdder;
```

After that the DI container can see the `$injectable` property on the class or function. So it can automaticaly create the service and resolve it's dependencies (parameters listed in `$injectParams` property).

By default, DI container will look for the service with exact param's name. But often you have implementations under different names. Or maybe you don't have implementation at all and want to use some simple default value. So to make dependency aliases use `@dependency` word in JS doc near function definition or a constructor.

```js

/**
 * @injectable
 * 
 * @dependency {addServiceImplementation = {}} addService
 */
export default function makeAdder (addService) {
  return (a, b) => addService.add(a, b)
}

// Plugin will generate this
makeAdder.$injectParams = {
  "addService": {
    "from": "addServiceImplementation",
    "default": {}
  }
};
```

### Injectable classes
Using `@injectable` with classes to create new class instance with automatically resolved constructor dependencies.

To redefine the created instance name, set it after `@injectable` word in the comment block. Factory function preferred name can be also rewritten. 
```js
/**
 * @injectable fooService
 */
class FooCoolService {
  constructor (moment) {
    // ...
  }
}
```
The plugin will add these fields:
 ```js 
FooCoolService.$injectable = true;
FooCoolService.$injectParams = {
    "moment": {
        "from": "moment"
    }
};
FooCoolService.$injectAs = "fooService";
FooCoolService.$injectNewInstance = true;
```
 So the DI container can:
 1. Use that name `fooService` to create new instance of the service.
 2. Create new instance of `FooCoolService` in container with automaticaly resolved dependencies.
 
 ### Development
 To run babel transformation:
 ```sh
$ cd ./src
$ ./node_modules/.bin/babel ./tests/fnDefaultClassExport.js --plugins ./../src
 ```