open-index/open-npm huggingface dataset:
npm package: @j154004/react-image-upload-dialog
Description: React based image upload dialog component
Author: elementsweb
Latest version: 1.0.0

# React Image Upload Dialog
React based image upload dialog component.

[Click here for demo.](https://elementsweb.github.io/react-image-upload-dialog/)

## Installation
Install the package from npm:

```
npm install --save @j154004/react-image-upload-dialog
```

## Usage
```
import ImageUploadDialog from '@j154004/react-image-upload-dialog';
```

### Props

|Name|Type|Default|Description|
|---|---|---|---|
|`open`|`boolean`||Show or hide the `Dialog` component.|
|`onCancel`|`function`||Callback fired when "Cancel" button is clicked<br><br>**Signature:**<br>`function(e: SyntheticEvent) => void`|
|`onUpload`|`function`||Callback fired when "Upload" button is clicked<br><br>**Signature:**<br>`function(dialogState: Object) => void`<br>*dialogState:* Object containing the `accepted`, `rejected`, `alternativeText` and `title` keys from the component state.|

### CSS API
You can override all the class names using the `classes` prop with the following keys:

|Name|Description|
|---|---|
|`textField`|Styles applied to the `TextField` components.|
|`dropzone`|Styles applied to the `Dropzone` component.|
|`imageMetadata`|Styles applied to the `ImageMetadata` component.|
npm package: @j154004/react-tree
Description: React based tree component
Author: elementsweb
Latest version: 1.0.0-alpha.3

# React Tree

## __In development!__
React based tree view component. Developed to visualise items from a NoSQL database that can be related to one another in a nested fashion.

## Features

✔️ Expand top-level items to reveal child items

✔️ Integrates with your existing Redux store to allow you to writing middleware for actions emitted by the component

✔️ Support for multiple reusable React-Redux components in an existing Redux application through separate state reduction

✔️ Custom state selectors to store component state in separate places in the Redux store

## Demo
You can import your component into the storybook, a good place to showcase your component.

Run the storybook with `npm run storybook` and navigate to `http://localhost:6006` in your browser.

### Github Pages
Before commiting your changes to Github you can run `npm run build-storybook` to build the storybook so that it can be hosted on Github pages.

## Usage
### Import the component
Import the component/s into your project:

```javascript
import Tree from '@j154004/react-tree';
```

Add the component to a parent component:
```javascript
<Tree selectState={state => state.itemTypeTwo.component} namespace="one" />
```

- __`selectState`__ is a function to tell the component where it should store its state in your application store.

- __`namespace`__ is the namespace to use in action types. For the above example the action trigger would look something like: `@@react-tree/two/INCREMENT_COUNTER`. Defaults to `default`, but it's recommended you always use a key, especially if you use the same component multiple times in one view.

### Include reducers
You can store the component state anywhere in your Redux store, just import the component reducer:

```
import { combineReducers } from 'redux';
import { componentReducer } from '@j154004/react-tree';

const rootReducer = combineReducers({
  itemTypeTwo: combineReducers({
    component: componentReducer('two')
  })
});
```

### Import SASS styles
Import the styles into your project also (in an existing SASS file):

```
@import "~MODULE_NAME/src/styles";
```

### Include SASS in Webpack build
Add another path to include in the rule for SCSS files:

```javascript
{
  test: /\.scss$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }, {
    loader: 'sass-loader',
    options: {
      includePaths: [
        path.resolve(__dirname, 'src'),
        componentModulePath
      ]
    }
  }]
}
```