open-index/open-npm huggingface dataset:
npm package: @feizheng/react-isolate-event-container
Description: A container that prevents certain events from propagating outside of the container.
Author: afei
Latest version: 1.0.0

# react-isolate-event-container
> A container that prevents certain events from propagating outside of the container.

## installation
```shell
npm install -S @feizheng/react-isolate-event-container
```

## update
```shell
npm update @feizheng/react-isolate-event-container
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| items     | array  | false    | []      | React events list.                    |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-isolate-event-container/dist/style.scss";

  // customize your styles:
  $react-isolate-event-container-options: ()
  ```
2. import js
  ```js
  import ReactIsolateEventContainer from '@feizheng/react-isolate-event-container';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    handleClick = (e) => {
      console.log('inner click1');
    };

    handleOutterClick = (e) => {
      console.log('outter click2');
    };

    handleCntClick = (e) => {
      console.log('container click3');
    };

    render() {
      return (
        <div className="app-container" onClick={this.handleCntClick}>
          <div className="isolated" onClick={this.handleOutterClick}>
            <ReactIsolateEventContainer items={['onClick']}>
              <button className="button" onClick={this.handleClick}>
                I am isolated
              </button>
            </ReactIsolateEventContainer>
          </div>

          <div className="no-isolated" onClick={this.handleOutterClick}>
            <button className="button" onClick={this.handleClick}>
              I am not isolated
            </button>
          </div>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-isolate-event-container/
npm package: @feizheng/react-list
Description: A list component.
Author: afei
Latest version: 1.0.3

# react-list
> A list component.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-list
```

## update
```shell
npm update @feizheng/react-list
```

## properties
| Name      | Type   | Required | Default | Description                                       |
| --------- | ------ | -------- | ------- | ------------------------------------------------- |
| className | string | false    | -       | The extended className for component.             |
| virtual   | bool   | false    | -       | If node name is React.Framgment.                  |
| nodeName  | any    | false    | 'div'   | Use customize node name(tagName or ReactElement). |
| items     | array  | false    | []      | List data source.                                 |
| template  | func   | false    | noop    | List item template.                               |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-list/dist/style.scss";

  // customize your styles:
  $react-list-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactList from '@feizheng/react-list';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      items: require('./assets/data.json')
    };

    template = ({ item }) => {
      return (
        <div key={item.domId} className="is-item">
          {item.name}
        </div>
      );
    };

    render() {
      return (
        <div className="app-container">
          <ReactList items={this.state.items} template={this.template} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-list/


## license
Code released under [the MIT license](https://github.com/afeiship/react-list/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-list
[version-url]: https://npmjs.org/package/@feizheng/react-list

[license-image]: https://img.shields.io/npm/l/@feizheng/react-list
[license-url]: https://github.com/afeiship/react-list/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-list
[size-url]: https://github.com/afeiship/react-list/blob/master/dist/react-list.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-list
[download-url]: https://www.npmjs.com/package/@feizheng/react-list
npm package: @feizheng/react-loading
Description: Spinner component for react.
Author: afei
Latest version: 1.0.4

# react-loading
> Spinner component for react.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-loading
```

## update
```shell
npm update @feizheng/react-loading
```

## properties
| Name          | Type   | Required | Default                 | Description                             |
| ------------- | ------ | -------- | ----------------------- | --------------------------------------- |
| mainClassName | string | false    | 'webkit-sassui-loading' | The loading key effect css className.   |
| backdrop      | union  | false    | -                       | Backdrop props or not display backdrop. |


## usage
1. import css
  ```scss
  @import "~@feizheng/webkit-sassui-backdrop";
  @import "~@feizheng/webkit-sassui-loading";
  @import "~@feizheng/react-loading/dist/style.scss";

  // customize your styles:
  $react-loading-options: ()
  ```
2. import js
  ```js
  import ReactLoading from '@feizheng/react-loading';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import { ReactVisibleController } from '@feizheng/react-visible';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: false
    };

    componentDidMount() {
      // global config
      this.appLoading = new ReactVisibleController(ReactLoading, {
        children: 'loading',
        backdrop: {
          transparent: true,
          onClick: () => {
            this.appLoading.dismiss();
          }
        }
      });
    }

    render() {
      return (
        <div className="app-container">
          <button
            className="button"
            onClick={(e) => {
              this.appLoading.present(() => {
                console.log('present.');
              });
            }}>
            Show Loading.
          </button>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-loading/


## license
Code released under [the MIT license](https://github.com/afeiship/react-loading/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-loading
[version-url]: https://npmjs.org/package/@feizheng/react-loading

[license-image]: https://img.shields.io/npm/l/@feizheng/react-loading
[license-url]: https://github.com/afeiship/react-loading/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-loading
[size-url]: https://github.com/afeiship/react-loading/blob/master/dist/react-loading.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-loading
[download-url]: https://www.npmjs.com/package/@feizheng/react-loading
npm package: @feizheng/react-markdown-props
Description: Generate markdown properties string.
Author: afei
Latest version: 1.2.3

# react-markdown-props
> Generate markdown properties string.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-markdown-props
```

## usage
```js
import rmp from '@feizheng/react-markdown-props';

rmp('./src/components/index.js');

// output
| Name        | Type   | Required | Default | Description                                 |
| ----------- | ------ | -------- | ------- | ------------------------------------------- |
| className   | string | false    | -       | The extended className for component.       |
| value       | object | false    | null    | Default value.                              |
| onChange    | func   | false    | noop    | The change handler.                         |
| destroyable | bool   | false    | -       | If element destroyed when visible to false. |
| backdrop    | union  | false    | -       | Backdrop props or not display backdrop.     |
```

## resources
- https://github.com/reactjs/react-docgen


## license
Code released under [the MIT license](https://github.com/afeiship/react-markdown-props/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-markdown-props
[version-url]: https://npmjs.org/package/@feizheng/react-markdown-props

[license-image]: https://img.shields.io/npm/l/@feizheng/react-markdown-props
[license-url]: https://github.com/afeiship/react-markdown-props/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-markdown-props
[size-url]: https://github.com/afeiship/react-markdown-props/blob/master/dist/react-markdown-props.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-markdown-props
[download-url]: https://www.npmjs.com/package/@feizheng/react-markdown-props
npm package: @feizheng/react-mixin-on-change
Description: OnChange mixin for react.
Author: feizheng
Latest version: 1.0.0

# react-mixin-on-change
> OnChange mixin for react.

## installation
```bash
npm install -S @feizheng/react-mixin-on-change
```

## bugs
- [ ] state when formData.xx_field

## usage
```js
// create file in: mixins/on-change.js
export default require('@feizheng/react-mixin-on-change').default(nx.$app);


// <input onChange={this.onChangeToState.bind(this, 'user.nickname')}>
// <input onChange={this.onChangeToState.bind(this, 'user.phone')}>

// state:
{
  user:{
    nickname:'',
    phone:''
  }
}
```
npm package: @feizheng/react-page-exception
Description: React page exception component.
Author: afei
Latest version: 1.0.1

# react-page-exception
> React page exception component.

## installation
```shell
npm install -S @feizheng/react-page-exception
```

## update
```shell
npm update @feizheng/react-page-exception
```

## properties
| property    | type   | default | description |
| ----------- | ------ | ------- | ----------- |
| className   | String | -       | -           |
| title       | String | -       | -           |
| description | String | -       | -           |
| image       | String | -       | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-page-exception/dist/style.scss";
  @import "~@feizheng/react-empty-state/dist/style";

  // customize your styles:
  $react-page-exception-options: ()
  ```
2. import js
  ```js
  import ReactPageException from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: '403',
      items: [
        {
          title: '403',
          description: '抱歉，你无权访问该页面',
          image:
            'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg'
        },
        {
          title: '404',
          description: '抱歉，你访问的页面不存在',
          image:
            'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg'
        },
        {
          title: '500',
          description: '抱歉，服务器出错了',
          image:
            'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg'
        }
      ]
    };

    get value() {
      const { items, value } = this.state;
      return items.find((item) => item.title === value);
    }

    onChange = (inEvent) => {
      const { value } = inEvent.target;
      this.setState({ value });
    };

    render() {
      const { items, value } = this.state;
      console.log('value:', value, this.value);
      return (
        <div className="app-container">
          <ReactPageException {...this.value} />

          <select name="sel1" onChange={this.onChange}>
            {items.map((item, index) => {
              return (
                <option key={index} value={item.title}>
                  {item.title}
                </option>
              );
            })}
          </select>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-page-exception/
npm package: @feizheng/react-pairs
Description: React pairs component.
Author: afei
Latest version: 1.0.0

# react-pairs
> React pairs component.

## installation
```shell
npm install -S @feizheng/react-pairs
```

## update
```shell
npm update @feizheng/react-pairs
```

## properties
| Name      | Type   | Default | Description                                            |
| --------- | ------ | ------- | ------------------------------------------------------ |
| className | string | -       | The extended className for component.                  |
| items     | array  | []      | Default data source([{key:'key', value:'value'},...]). |
| template  | func   | noop    | The pairs template callback.                           |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-pairs/dist/style.scss";

  // customize your styles:
  $react-pairs-options: ()
  ```
2. import js
  ```js
  import ReactPairs from '@feizheng/react-pairs';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import nxPickPairs from '@feizheng/next-pick-pairs';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      var obj = {
        nickname: null,
        uid: 'UR1785049326',
        job: null,
        last_name: null,
        username: '15502115100',
        last_active: '2017-09-22T13:08:04.753046Z',
        is_staff: false,
        login_count: 5,
        gender: null,
        is_active: true,
        groups: [],
        company: null,
        is_superuser: false,
        first_name: null,
        last_login: '2017-09-22T13:08:04.753038Z',
        permissions: [],
        date_joined: '2017-09-19T14:13:10.129030Z',
        email: 'test@email.com',
        phone: '15502115100'
      };

      const items = nx.pickPairs(obj, ['uid', 'is_staff', 'is_active']);

      return (
        <div className="app-container">
          <h1>Pairs with template</h1>
          <ReactPairs
            items={items}
            template={({ item, index }) => {
              console.log(item);
              return (
                <div className="is-item" key={item.key}>
                  <strong>{item.key} </strong> - <em>{item.value + ''}</em>
                </div>
              );
            }}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-pairs/
npm package: @feizheng/react-photon
Description: Photon components built with React.
Author: afeiship
Latest version: 1.0.2

# react-photon
> Photon components built with React.

## installation
```shell
npm i -S @feizheng/react-photon
```

## dynamic import
1. install `babel-plugin-import`

   ```shell
   npm i -D babel-plugin-import
   ```
2. `.babelrc`

  ```js
  {
    "presets": ["@babel/preset-env", "@babel/react"],
    "plugins": [
      // ....
      [ "import", { "libraryName": "@feizheng/react-photon", "libraryDirectory": "dist/lib" } ]
    ]
  }
  ```

## resources
- http://photonkit.com/
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup
npm package: @feizheng/react-qrcode
Description: Qr code for react.
Author: afei
Latest version: 1.1.1

# react-qrcode
> Qr code for react.

## installation
```shell
npm install -S @feizheng/react-qrcode
```

## update
```shell
npm update @feizheng/react-qrcode
```

## properties
| property  | type   | default | description |
| --------- | ------ | ------- | ----------- |
| className | String | -       | -           |
| value     | String | -       | -           |
| options   | Object | -       | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-qrcode/dist/style.scss";

  // customize your styles:
  $react-qrcode-options: ()
  ```
2. import js
  ```js
  import ReactQrcode from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: 'https://www.baidu.com'
    };

    changeValue = () => {
      console.log('set new value!');
      this.setState({ value: 'https://www.mipengine.org/' });
    };

    render() {
      const { value } = this.state;
      console.log('value', value);
      return (
        <div className="app-container">
          <ReactQrcode value={value} />
          <button className="button" onClick={this.changeValue}>Regenerate</button>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-qrcode/

## resources
- https://www.npmjs.com/package/qrcodejs2
npm package: @feizheng/react-range
Description: Pure range form element for react.
Author: afei
Latest version: 1.0.0

# react-range
> Pure range form element for react.

## installation
```shell
npm install -S @feizheng/react-range
```

## update
```shell
npm update @feizheng/react-range
```

## properties
| property  | type   | default | description |
| --------- | ------ | ------- | ----------- |
| className | String | -       | -           |
| value     | -      | -       | -           |
| onChange  | -      | -       | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-range/dist/style.scss";

  // customize your styles:
  $react-range-options: ()
  ```
2. import js
  ```js
  import ReactRange from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        <div className="app-container">
          <ReactRange
            min="2"
            max="10"
            step="2"
            defaultValue="4"
            onChange={(e) => {
              console.log(e.target.value);
            }}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-range/
npm package: @feizheng/react-removable-list
Description: A removable list for react.
Author: afei
Latest version: 1.0.2

# react-removable-list
> A removable list for react.

## installation
```shell
npm install -S @feizheng/react-removable-list
```
## properties
| property  | type | description |
| --------- | ---- | ----------- |
| className | -    | -           |
| items     | -    | -           |
| onChange  | -    | -           |
| templte   | -    | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-removable-list/dist/style.scss";

  // customize your styles:
  $react-removable-list-options: ()
  ```
2. import js
  ```js
  import ReactRemovableList from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      items: [
        { value: 'k1', label: 'label111' },
        { value: 'k2', label: 'label222' },
        { value: 'k3', label: 'label333' },
        { value: 'k4', label: 'label444' }
      ]
    };

    onChange1 = (inEvent) => {
      console.log('change event:', inEvent.target.value);
    };

    render() {
      return (
        <div className="app-container">
          <ReactRemovableList
            onChange={this.onChange1}
            items={this.state.items}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-removable-list/
npm package: @feizheng/react-route-tabs
Description: React tabs with routes.
Author: afei
Latest version: 1.0.0

# react-route-tabs
> React tabs with routes.

## install
```shell
npm install -S @feizheng/react-route-tabs
```

## usage
1. import css
  ```scss
  @import "~react-route-tabs/style.scss";

  // customize your styles:
  $react-route-tabs-options: ()
  ```
2. import js
  ```js
  import { ReactRouteTabs, ReactRouteTab } from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        <div className="app-container">
          <ReactRouteTabs>
            <ReactRouteTab title="nav1" replace to="/nav1">
              Tab1 Content!
            </ReactRouteTab>
            <ReactRouteTab title="nav2" replace to="/nav2">
              Tab2 Content!
            </ReactRouteTab>
          </ReactRouteTabs>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-route-tabs/
npm package: @feizheng/react-searchlight
Description: Searchlight for react.
Author: afei
Latest version: 1.0.0

# react-searchlight
> Searchlight for react.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-searchlight
```

## update
```shell
npm update @feizheng/react-searchlight
```

## properties
| Name      | Type   | Required | Default | Description                              |
| --------- | ------ | -------- | ------- | ---------------------------------------- |
| className | string | false    | -       | The extended className for component.    |
| options   | object | false    | -       | The default options for react-draggable. |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-searchlight/dist/style.scss";

  // customize your styles:
  $react-searchlight-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@feizheng/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactSearchlight from '@feizheng/react-searchlight';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-searchlight">
          <h1 className="text-center mb-5 text-white text-2xl">
            Searchlight for react.
          </h1>
          <iframe width="100%" src="https://m.baidu.com"></iframe>
          <ReactSearchlight />
        </ReactDemokit>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-searchlight/


## license
Code released under [the MIT license](https://github.com/afeiship/react-searchlight/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-searchlight
[version-url]: https://npmjs.org/package/@feizheng/react-searchlight

[license-image]: https://img.shields.io/npm/l/@feizheng/react-searchlight
[license-url]: https://github.com/afeiship/react-searchlight/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-searchlight
[size-url]: https://github.com/afeiship/react-searchlight/blob/master/dist/react-searchlight.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-searchlight
[download-url]: https://www.npmjs.com/package/@feizheng/react-searchlight
npm package: @feizheng/react-select
Description: Pure select for react.
Author: afei
Latest version: 1.0.1

# react-select
> Pure select for react.

## installation
```shell
npm install -S @feizheng/react-select
```

## update
```shell
npm update @feizheng/react-select
```

## properties
| property  | type   | default | description |
| --------- | ------ | ------- | ----------- |
| className | String | -       | -           |
| value     | -      | -       | -           |
| onChange  | -      | -       | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-select/dist/style.scss";

  // customize your styles:
  $react-select-options: ()
  ```
2. import js
  ```js
  import ReactSelect from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      items: [
        {
          label: 'optino1',
          value: 'v1'
        },
        {
          label: 'optino2',
          value: 'v2'
        },
        {
          label: 'optino3',
          value: 'v3'
        }
      ]
    };

    constructor(inProps) {
      super(inProps);
      this.onChange = this.onChange.bind(this);
    }

    onChange(inEvent) {
      console.log('value:', inEvent.target.value);
    }

    render() {
      return (
        <div className="app-container">
          <p>
            <ReactSelect
              defaultValue={['v1']}
              multiple
              items={this.state.items}
              onChange={this.onChange}
            />
          </p>

          <p>
            <ReactSelect
              defaultValue="v2"
              items={this.state.items}
              onChange={this.onChange}
            />
          </p>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-select/
npm package: @feizheng/react-spinner
Description: Spinner for react.
Author: afei
Latest version: 1.1.0

# react-spinner
> Spinner for react.

## installation
```shell
npm install -S @feizheng/react-spinner
```

## update
```shell
npm update @feizheng/react-spinner
```

## properties
| Name      | Type    | Default         | Description                           |
| --------- | ------- | --------------- | ------------------------------------- |
| className | string  | -               | The extended className for component. |
| value     | bool    | false           | The spinner visible value.            |
| onChange  | func    | -               | The change handler.                   |
| indicator | element | <img src="#" /> | The indicator element.                |
| caption   | any     | 'loading'       | The indicator text.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-spinner/dist/style.scss";

  // customize your styles:
  $react-spinner-options: ()
  ```
2. import js
  ```js
  import ReactSpinner from '@feizheng/react-spinner';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  import musicSvg from './assets/music-1080px.svg';
  import wedgesSvg from './assets/wedges-2.9s-108px.svg';

  class App extends React.Component {
    constructor(inProps) {
      super(inProps);
      this.state = {
        loading: false,
        svg: musicSvg
      };
    }
    handleClick1 = (inEvent) => {
      const { loading } = this.state;
      this.setState({ loading: !loading, svg: musicSvg });
    };

    handleClick2 = (inEvent) => {
      const { loading } = this.state;
      this.setState({ loading: !loading, svg: wedgesSvg });
    };

    render() {
      const { loading, svg } = this.state;
      return (
        <div className="app-container">
          <button className="button" onClick={this.handleClick1}>
            Toggle Loading - Music
          </button>
          <button className="button" onClick={this.handleClick2}>
            Toggle Loading - WedgesSvg
          </button>
          <ReactSpinner value={loading} indicator={<img src={svg} />}>
            <img
              width="100%"
              src="https://yt-adp.ws.126.net/linxue/7001123_axeu_20191122.jpg"
            />
            <img
              hidden
              width="100%"
              src="http://cms-bucket.ws.126.net/2019/11/25/886cba5835d2491798fe3d6584778129.png"
            />
          </ReactSpinner>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-spinner/
npm package: @feizheng/react-status-manager
Description: React component for status manager.
Author: afei
Latest version: 1.1.1

# react-status-manager
> React component for status manager.

## install
```shell
npm install -S afeiship/react-status-manager
```

## usage
1. import css
  ```scss
  @import "~react-status-manager/style.scss";

  // customize your styles:
  $react-status-manager-options: ()
  ```
2. import js
  ```js
  import ReactStatusManager from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: 'init',
        smvalue: 'N',
        step: 0
      };
    }

    click1 = (e) => {
      this.setState({ value: 'init' });
      console.log('click1');
    };
    click2 = (e) => {
      this.setState({ value: 'active' });
      console.log('click2');
    };
    click3 = (e) => {
      this.setState({ value: 'running' });
      console.log('click3');
    };
    click4 = (e) => {
      this.setState({ value: 'finish' });
      console.log('click4');
    };

    _click5 = (e) => {
      this.setState({
        smvalue: 'A'
      });
    };

    _clickStep = (e) => {
      let step = this.state.step;
      this.setState({
        step: step === 3 ? 0 : step + 1
      });
    };

    render() {
      return (
        <div className="app-container">
          <ReactStatusManager
            size="16px"
            value={this.state.value}
            items={['init', 'active', 'running', 'finish']}>
            <span>下拉刷新</span>
            <span>释放更新</span>
            <img
              width="30"
              src={
                'https://assets-cdn.shimo.im/assets/images/loading-b67e5a67dc.gif'
              }
              alt=""
            />
            <span>更新完毕</span>
          </ReactStatusManager>

          <ReactStatusManager
            value={this.state.smvalue}
            className={`wp-icon-${this.state.smvalue}`}
            items={['N', 'A', 'F']}>
            <span>未开始</span>
            <span>进行中</span>
            <span>已经结束</span>
          </ReactStatusManager>

          <button onClick={this.click1}>to `init`</button>
          <button onClick={this.click2}>to `active`</button>
          <button onClick={this.click3}>to `running`</button>
          <button onClick={this.click4}>to `finish`</button>

          <button onClick={this._click5}>SetSMvalue</button>

          <h2>Wizard</h2>
          <button onClick={this._clickStep}>next step</button>
          <ReactStatusManager value={this.state.step} items={[0, 1, 2, 3]}>
            <div className="step">step1,input password</div>
            <div className="step">step2,input phone</div>
            <div className="step">step3,input other info</div>
            <div className="step">
              step4,do submit! <button>SUBMIT</button>
            </div>
          </ReactStatusManager>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-status-manager/
npm package: @feizheng/react-svg-icon
Description: Svg icon for react.
Author: afei
Latest version: 1.1.1

# react-svg-icon
> Svg icon for react.

## installation
```shell
npm install -S @feizheng/react-svg-icon
```

## update
```shell
npm update @feizheng/react-svg-icon
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| iconClass | string | 'icon'  | The main(prefix) icon class.          |
| value     | string | -       | The icon name.                        |
| size      | number | -       | The icon size(font-size).             |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-svg-icon/dist/style.scss";

  // customize your styles:
  $react-svg-icon-options: ()
  ```
2. import js
  ```js
  import ReactSvgIcon from '@feizheng/react-svg-icon';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import 'phoenix-icons';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        // copy value from iconfont: https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=YOURPROJECT_ID
        <div className="app-container">
          <div className="is-item">
            <ReactSvgIcon value="iconPaaS_test" />
            <ReactSvgIcon value="iconPaaS_search" />
            <ReactSvgIcon value="iconPaaS_sort" />
          </div>

          <div className="is-item">
            <ReactSvgIcon value="iconPaaS_ruler" size="20" />
            <ReactSvgIcon value="iconG_zhenduan" size="40"/>
            <ReactSvgIcon value="iconG_data" size="50"/>
          </div>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-svg-icon/
npm package: @feizheng/react-sw-update-tips
Description: Update tips for service-worker.
Author: afei
Latest version: 1.0.4

# react-sw-update-tips
> Update tips for service-worker.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-sw-update-tips
```

## update
```shell
npm update @feizheng/react-sw-update-tips
```

## properties
| Name      | Type   | Required | Default                      | Description                           |
| --------- | ------ | -------- | ---------------------------- | ------------------------------------- |
| className | string | false    | -                            | The extended className for component. |
| text      | union  | false    | '↺ 有新版本更新啦，点击刷新' | Tips text.                            |
| value     | bool   | false    | false                        | Default value.                        |
| hidden    | bool   | false    | false                        | The html hidden status.               |
| onChange  | func   | false    | -                            | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-sw-update-tips/dist/style.scss";

  // customize your styles:
  $react-sw-update-tips-options: ()
  ```
2. import js
  ```js
  import NxOfflineSw from '@feizheng/next-offline-sw';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactSwUpdateTips from '@feizheng/react-sw-update-tips';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      hasUpdate: true
    };

    componentDidMount() {
      this.installSw();
    }

    installSw() {
      NxOfflineSw.install({
        onUpdateReady: function () {
          // this.setState({ hasUpdate: false });
          console.log('SW Event:', 'onUpdateReady');
        }
      });
    }

    render() {
      return (
        <div className="app-container">
          <ReactSwUpdateTips value={this.state.hasUpdate} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-sw-update-tips/


## license
Code released under [the MIT license](https://github.com/afeiship/react-sw-update-tips/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-sw-update-tips
[version-url]: https://npmjs.org/package/@feizheng/react-sw-update-tips

[license-image]: https://img.shields.io/npm/l/@feizheng/react-sw-update-tips
[license-url]: https://github.com/afeiship/react-sw-update-tips/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-sw-update-tips
[size-url]: https://github.com/afeiship/react-sw-update-tips/blob/master/dist/react-sw-update-tips.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-sw-update-tips
[download-url]: https://www.npmjs.com/package/@feizheng/react-sw-update-tips
npm package: @feizheng/react-textarea
Description: Textarea with text limit for react.
Author: afei
Latest version: 1.0.0

# react-textarea
> Textarea with text limit for react.

## installation
```shell
npm install -S @feizheng/react-textarea
```

## update
```shell
npm update @feizheng/react-textarea
```

## properties
| property  | type   | default | description |
| --------- | ------ | ------- | ----------- |
| className | String | -       | -           |
| value     | -      | -       | -           |
| onChange  | -      | -       | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-textarea/dist/style.scss";

  // customize your styles:
  $react-textarea-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactTextarea from '@feizheng/react-textarea';
  
  // your app:
  class App extends React.Component{
    render(){
      return (
        <ReactTextarea />
      )
    }
  }

  // render to dom:
  ReactDOM.render(<App/>, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-textarea/

## resources
- https://github.com/jackmoore/autosize
npm package: @feizheng/react-tip
Description: Tooltip for react based on ballon.css.
Author: afei
Latest version: 1.0.0

# react-tip
> Tooltip for react based on ballon.css.

## installation
```shell
npm install -S @feizheng/react-tip
```

## update
```shell
npm update @feizheng/react-tip
```

## properties
| property  | type   | default | description |
| --------- | ------ | ------- | ----------- |
| className | String | -       | -           |
| title     | String | -       | -           |
| placement | String | -       | -           |

## placement
```json
[
  "up",
  "down",
  "left",
  "right",
  "up-left",
  "up-right",
  "down-left",
  "down-right"
]
```

## usage
1. import css
  ```scss
  @import "balloon-css";
  @import "~@feizheng/react-tip/dist/style.scss";

  // customize your styles:
  $react-tip-options: ()
  ```
2. import js
  ```js
  import ReactTip from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      placements: [
        'up',
        'down',
        'left',
        'right',
        'up-left',
        'up-right',
        'down-left',
        'down-right'
      ]
    };
    render() {
      const { placements } = this.state;
      return (
        <div className="app-container">
          {placements.map((item) => {
            return (
              <ReactTip key={item} title={`abc.com - ${item}`} placement={item}>
                <button>Abc.com - {item}</button>
              </ReactTip>
            );
          })}
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-tip/

## resources
- https://github.com/kazzkiq/balloon.css
npm package: @feizheng/react-toast
Description: Toast for react.
Author: afei
Latest version: 1.0.0

# react-toast
> Toast for react.

## installation
```shell
npm install -S @feizheng/react-toast
```

## update
```shell
npm update @feizheng/react-toast
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| value     | bool   | false   | Default value.                        |
| onChange  | func   | noop    | The change handler.                   |
| interval  | number | 2500    | The default timer interval;           |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-toast/dist/style.scss";

  // customize your styles:
  $react-toast-options: ()
  ```
2. import js
  ```js
  import ReactToast from '@feizheng/react-toast';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    constructor(inProps) {
      super(inProps);
      ReactToast.init({ interval: 2000 });
    }

    handleClick = (inEvent) => {
      ReactToast.present('I am a toast');
    };

    render() {
      return (
        <div className="app-container">
          <button className="button" onClick={this.handleClick}>
            Show Toast
          </button>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-toast/
npm package: @feizheng/react-upload-weibo
Description: Weibo upload pictures for react.
Author: afei
Latest version: 1.0.1

# react-upload-weibo
> Weibo upload pictures for react.

## installation
```shell
npm install -S @feizheng/react-upload-weibo
```

## update
```shell
npm update @feizheng/react-upload-weibo
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| onChange  | func   | noop    | The change handler.                   |
| max       | number | 10      | The max upload limit.                 |
| token     | string | -       | The weibo oss token.                  |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-upload-weibo/dist/style.scss";

  // customize your styles:
  $react-upload-weibo-options: ()
  ```
2. import js
  ```js
  import ReactUploadWeibo from '@feizheng/react-upload-weibo';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import tokenJson from '../.token.json';

  import './assets/style.scss';

  class App extends React.Component {
    state = {
      token: tokenJson.token
    };

    handleChange = (e) => {
      console.log(e.target.value);
    };

    render() {
      return (
        <div className="hello-react-upload-weibo">
          <ReactUploadWeibo
            max={3}
            token={this.state.token}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-upload-weibo/
npm package: @feizheng/react-upload-weibo-media
Description: React upload media.
Author: afei
Latest version: 1.0.1

# react-upload-weibo-media
> React upload media.

## installation
```shell
npm install -S @feizheng/react-upload-weibo-media
```

## update
```shell
npm update @feizheng/react-upload-weibo-media
```

## properties
| Name      | Type   | Default           | Description                           |
| --------- | ------ | ----------------- | ------------------------------------- |
| className | string | -                 | The extended className for component. |
| value     | string | -                 | Default value.                        |
| onChange  | func   | noop              | The change handler.                   |
| size      | array  | ['100%', '160px'] | The media(image) size.                |
| inputable | bool   | false             | If input control use text diretly.    |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-upload-weibo-media/dist/style.scss";
  @import '~@feizheng/webkit-sassui-frame-wrapper';

  // customize your styles:
  $react-upload-weibo-media-options: ()
  ```
2. import js
  ```js
  import ReactUploadWeiboMedia from '@feizheng/react-upload-weibo-media';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import tokenJson from '../.token.json';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      token: tokenJson.token,
      value: ''
    };

    _onChange = (inEvent) => {
      console.log(inEvent);
    };

    render() {
      return (
        <div className="app-container">
          <ReactUploadWeiboMedia
            onChange={this._onChange}
            value={this.state.value}
            token={this.state.token}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-upload-weibo-media/
npm package: @feizheng/react-video
Description: React video wrapper.
Author: afei
Latest version: 1.0.0

# react-video
> React video wrapper.

## installation
```shell
npm install -S @feizheng/react-video
```

## update
```shell
npm update @feizheng/react-video
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| controls  | bool   | true    | If show controls.                     |
| source    | array  | []      | Video source list.                    |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-video/dist/style.scss";

  // customize your styles:
  $react-video-options: ()
  ```
2. import js
  ```js
  import ReactVideo from '@feizheng/react-video';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <h1>ReactVideo</h1>
          <ReactVideo
            source={[
              {
                type: 'video/mp4',
                src: 'https://www.runoob.com/try/demo_source/movie.mp4'
              }
            ]}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-video/
npm package: @feizheng/react-waterfall
Description: Waterfall component for react.
Author: afei
Latest version: 1.0.2

# react-waterfall
> Waterfall component for react.

## installation
```shell
npm install -S @feizheng/react-waterfall
```

## properties
| property  | type   | default                          | description       |
| --------- | ------ | -------------------------------- | ----------------- |
| className | string | ''                               | Extend className  |
| items     | array  | []                               | DataSource items  |
| template  | func   | noop({ item, index, column }) | Item template     |
| column    | number | 3                                | The column number |

## usage
1. import css
  ```scss
  @import "~react-waterfall/style.scss";

  // customize your styles:
  $react-waterfall-options: ()
  ```
2. import js
  ```js
  import ReactWaterfall from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    constructor(inProps) {
      super(inProps);
      this.state = {
        items: [
          { src: 'https://picsum.photos/id/658/200/300', id: '111' },
          { src: 'https://picsum.photos/id/653/200/100', id: '222' },
          { src: 'https://picsum.photos/id/112/300/200', id: '333' },
          { src: 'https://picsum.photos/id/656/500/200', id: '444' },
          { src: 'https://picsum.photos/id/115/100/120', id: '555' },
          { src: 'https://picsum.photos/id/621/100/180', id: '666' },
          { src: 'https://picsum.photos/id/634/160/120', id: '777' },
        ]
      };
    }

    template = ({ item }) => {
      return (
        <div key={item.id} className={`is-item`}>
          <img width="100%" src={item.src} />
          <p>Cap = {item.id}</p>
        </div>
      );
    };

    render() {
      return (
        <div className="app-container">
          <ReactWaterfall items={this.state.items} template={this.template} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-waterfall/