open-index/open-npm huggingface dataset:
npm package: @feizheng/react-ant-select
Description: React ant select builder.
Author: afei
Latest version: 1.1.0

# react-ant-select
> React ant select builder.

[![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-ant-select
```

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

## properties
| Name        | Type   | Required | Default  | Description                           |
| ----------- | ------ | -------- | -------- | ------------------------------------- |
| className   | string | false    | -        | The extended className for component. |
| value       | object | false    | -        | Default value.                        |
| placeholder | string | false    | '请选择' | Placeholder.                          |
| items       | array  | false    | []       | The data source.                      |
| template    | func   | false    | -        | The data item template.               |
| onChange    | func   | false    | noop     | The change handler.                   |


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

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

  class App extends React.Component {
    state = {
      items: [
        {
          value: 'op1',
          label: 'option1d'
        },
        {
          value: 'op2',
          label: 'option2d'
        },
        {
          value: 'op3',
          label: 'option3d'
        }
      ]
    };

    handleChange = (inEvent) => {
      console.log('inEvent.target.value', inEvent.target.value);
    };

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

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

  ```

## documentation
- https://afeiship.github.io/react-ant-select/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-ant-select
[download-url]: https://www.npmjs.com/package/@feizheng/react-ant-select
npm package: @feizheng/react-ant-switch
Description: React ant switch.
Author: afei
Latest version: 1.0.0

# react-ant-switch
> React ant switch.

[![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-ant-switch
```

## update
```shell
npm update @feizheng/react-ant-switch
```

## properties
| Name         | Type   | Required | Default | Description                           |
| ------------ | ------ | -------- | ------- | ------------------------------------- |
| className    | string | false    | -       | The extended className for component. |
| value        | bool   | false    | -       | The runtime value.                    |
| defaultValue | bool   | false    | -       | Default value.                        |
| onChange     | func   | false    | noop    | The change handler.                   |


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

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

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactAntSwitch
            onChange={(e) => {
              console.log('value:', e.target.value);
            }}
          />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-ant-switch/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-ant-switch
[download-url]: https://www.npmjs.com/package/@feizheng/react-ant-switch
npm package: @feizheng/react-backdrop
Description: Backdrop for react.
Author: afei
Latest version: 1.0.6

# react-backdrop
> Backdrop for react.

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

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

## properties
| Name        | Type | Required | Default | Description                 |
| ----------- | ---- | -------- | ------- | --------------------------- |
| fixed       | bool | false    | true    | If style.position is fixed. |
| transparent | bool | false    | false   | If the opacity is 0.        |


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

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

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

    handleClick = (e) => {
      this.setState({ visible: !this.state.visible });
    };

    render() {
      const { visible } = this.state;
      return (
        <div className="app-container">
          <button className="button" onClick={this.handleClick}>
            Toggle
          </button>
          <ReactBackdrop destroyable value={visible} />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-backdrop/
npm package: @feizheng/react-blank
Description: Blank for react.
Author: afei
Latest version: 1.0.0

# react-blank
> Blank for react.

## installation
```shell
npm install -S @feizheng/react-blank
```
## properties
| property        | type | description |
| --------------- | ---- | ----------- |
| className       | -    | -           |
| value           | -    | -           |
| onChange        | -    | -           |

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

  // customize your styles:
  $react-blank-options: ()
  ```
2. import js
  ```js
  import ReactBlank from '../src/main';
  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">
          <p>
            少年时，想碰到一个聂小倩，拼了性命爱一场，天亮前带着她的魂魄远走他乡。
          </p>
          <ReactBlank value={100} />
          <p>
            青年时，想碰到一个白素贞，家大业大，要啥有啥，吃完软饭一抹嘴，还有人负责把她关进雷峰塔。
            中年时，想要一个田螺姑娘，温婉可人，红袖添香，半夜写累了，让她变回原形，加干辣椒、花椒、姜、蒜片爆炒，淋入香油，起锅装盘。
          </p>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-blank/
npm package: @feizheng/react-border-collapse
Description: Grouped compnents for border-collapse case.
Author: afei
Latest version: 1.0.1

# react-border-collapse
> Grouped compnents for border-collapse case.

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

## update
```shell
npm update @feizheng/react-border-collapse
```

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

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

  // customize your styles:
  $react-border-collapse-options: ()
  ```
2. import js
  ```js
  import ReactBorderCollapse from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import ReactBlank from '@feizheng/react-blank';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <h4>Normal</h4>
          <div className="container">
            <div className="box">ABC</div>
            <div className="box">ABC</div>
          </div>

          <ReactBlank value={20} />
          <h4>Has Collapsed, less content</h4>
          <ReactBorderCollapse>
            <div className="box">ABC</div>
            <div className="box">ABC</div>
          </ReactBorderCollapse>
          <ReactBlank value={20} />
          <h4>Has Collapsed, plenty of content</h4>
          <ReactBorderCollapse>
            <div className="box">
              道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。
              故常无欲，以观其妙，常有欲，以观其徼。
              此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
            </div>
            <div className="box">
              天下皆知美之为美，斯恶已，皆知善之为善，斯不善已。
              故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。
              是以圣人处无为之事，行不言之教，万物作焉而不辞，生而不有，为而不恃，功成而弗居。
              夫惟弗居，是以不去。
            </div>
          </ReactBorderCollapse>
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-border-collapse/
npm package: @feizheng/react-card
Description: Card for react.
Author: afei
Latest version: 1.1.4

# react-card
> Card 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-card
```

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

## properties
| Name       | Type   | Required | Default | Description                                   |
| ---------- | ------ | -------- | ------- | --------------------------------------------- |
| className  | string | false    | -       | The extended className for component.         |
| active     | bool   | false    | -       | If the card is active.                        |
| disabled   | bool   | false    | -       | If the card is not enable.                    |
| hoverable  | bool   | false    | -       | If the card can hover and with :hover effect. |
| clickable  | bool   | false    | -       | If the card can click with :active effect.    |
| shadowable | bool   | false    | true    | If the card show with shadow.                 |


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

  // customize your styles:
  $react-card-options: ()
  ```
2. import js
  ```js
  import ReactCard from '@feizheng/react-card';
  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">
          <ReactCard>
            <img
              src="http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg"
              width="100%"
            />
          </ReactCard>

          <ReactCard hoverable clickable>
            <p>
              少年时，想碰到一个聂小倩，拼了性命爱一场，天亮前带着她的魂魄远走他乡。
            </p>
            <p>
              青年时，想碰到一个白素贞，家大业大，要啥有啥，吃完软饭一抹嘴，还有人负责把她关进雷峰塔。
            </p>
            <p>
              中年时，想要一个田螺姑娘，温婉可人，红袖添香，半夜写累了，让她变回原形，加干辣椒、花椒、姜、蒜片爆炒，淋入香油，起锅装盘。
            </p>
          </ReactCard>
        </div>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# react-checkbox
> Pure checkbox for react.

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

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

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

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

  // customize your styles:
  $react-checkbox-options: ()
  ```
2. import js
  ```js
  import ReactCheckbox from '../src/main';
  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">
          <label>
            <ReactCheckbox
              indeterminate
              defaultValue={true}
              onChange={(e) => {
                console.log('e.target.value', e.target.value);
              }}
            />
            <span>A checkbox indeterminate</span>
          </label>
          <label>
            <ReactCheckbox
              defaultValue={true}
              onChange={(e) => {
                console.log('e.target.value', e.target.value);
              }}
            />
            <span>A checkbox</span>
          </label>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-checkbox/
npm package: @feizheng/react-checkbox-group
Description: Checkbox/checkbox group component for react.
Author: afei
Latest version: 1.0.1

# react-checkbox-group
> Checkbox/checkbox group component for react.

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

## update
```shell
npm update @feizheng/react-checkbox-group
```

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

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

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

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

    render() {
      return (
        <div className="app-container">
          <ReactCheckboxGroup
            name="abc"
            onChange={(e) => {
              console.log('change:', e.target.value);
            }}
            items={this.state.items}
            defaultValue={this.state.defaultValue}
          />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-checkbox-group/
npm package: @feizheng/react-clipboard
Description: A simple React wrapper around the clipboard.js library.
Author: afei
Latest version: 1.0.0

# react-clipboard
> A simple React wrapper around the clipboard.js library.

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

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

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

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

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

  class App extends React.Component {
    state = {
      value: `道可道，非常道；名可名，非常名。
  无名，天地之始，有名，万物之母。
  故常无欲，以观其妙，常有欲，以观其徼。
  此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。`
    };
    render() {
      return (
        <div className="app-container">
          <div className="clippy">
            <textarea
              value={this.state.value}
              onChange={(e) => {
                console.log(e.target.value);
                this.setState({ value: e.target.value });
              }}>
              You text goes here!
            </textarea>
            <ReactClipboard value={this.state.value}>ClickToCopy!</ReactClipboard>
          </div>
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-clipboard/
npm package: @feizheng/react-collapse
Description: Collapse for react.
Author: afei
Latest version: 1.0.0

# react-collapse
> Collapse 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-collapse
```

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

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | object | false    | null    | The changed value.                    |
| onChange  | func   | false    | noop    | The change handler.                   |


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

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

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

    componentDidMount() {
      NxOfflineSw.install({
        onUpdateReady: () => {
          this.setState({ hasUpdate: true });
        }
      });
    }

    render() {
      return (
        <div className="p-3 app-container">
          <ReactCollapse className="bg-gray-800 mb-5 text-white" />
          <button className="button">I am a button</button>
          <ReactSwUpdateTips value={this.state.hasUpdate} />
          <ReactGithubCorner value="https://github.com/afeiship/react-collapse" />
        </div>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-collapse
[download-url]: https://www.npmjs.com/package/@feizheng/react-collapse
npm package: @feizheng/react-color-picker
Description: A wrapper for react-color.
Author: afei
Latest version: 1.0.3

# react-color-picker
> A wrapper for react-color.

## installation
```shell
npm install -S @feizheng/react-color-picker
```
## properties
| property        | type | description |
| --------------- | ---- | ----------- |
| className       | -    | -           |
| value           | -    | -           |
| onChange        | -    | -           |

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

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

  class App extends React.Component {
    state = {
      value: '#ff6600'
    };

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

    render() {
      const { value } = this.state;
      return (
        <div className="app-container" style={{ background: value }}>
          <ReactColorPicker value={value} onChange={this.onChange} />
          <div className="is-label">{value}</div>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-color-picker/
npm package: @feizheng/react-condition-manager
Description: React condition manager.
Author: afei
Latest version: 1.1.2

# react-condition-manager
> React condition manager.

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

## update
```shell
npm update @feizheng/react-condition-manager
```

## properties
| Name     | Type  | Default | Description             |
| -------- | ----- | ------- | ----------------------- |
| items    | array | []      | You condition list.     |
| nodeName | any   | 'div'   | The container tag name. |
| virtual  | bool  | false   | If use react.framgment. |


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

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

  class App extends React.Component {
    state = {
      index: 0,
      status: 'N'
    };

    handleClick(status) {
      console.log(status);
      if (status === 'F0') {
        this.setState({
          index: 0,
          status: 'F0'
        });
      } else if (status === 'F1') {
        this.setState({
          index: 1,
          status: 'F1'
        });
      } else {
        this.setState({ status });
      }
    }

    render() {
      const { index, status } = this.state;
      return (
        <div className="app-container">
          <RCM items={[true, false, true]}>
            <div>when condition 1</div>
            <div>when condition 2</div>
            <div>when condition 3</div>
          </RCM>

          <button className="button" onClick={this.handleClick.bind(this, 'N')}>
            Set Status - N
          </button>
          <button className="button" onClick={this.handleClick.bind(this, 'A')}>
            Set Status - A
          </button>
          <button className="button" onClick={this.handleClick.bind(this, 'F0')}>
            Set Status - F-0
          </button>
          <button className="button" onClick={this.handleClick.bind(this, 'F1')}>
            Set Status - F-1
          </button>
          <button className="button" onClick={this.handleClick.bind(this, null)}>
            Set DEFULA
          </button>

          <RCM
            virtual
            items={[
              index === 0 && status === 'N',
              index === 0 && status === 'A',
              index === 0 && status === 'F0',
              index === 1 && status === 'F1',
              null
            ]}>
            <div>when condition 1 ---. N</div>
            <div>when condition 2 ---. A</div>
            <div>when condition 3 ---. F (index = 0)</div>
            <div>when condition 4 ---. F (index = 1)</div>
            <div>default. null view..</div>
          </RCM>
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-condition-manager/
npm package: @feizheng/react-demokit
Description: Demo tookit for react.
Author: afei
Latest version: 1.0.5

# react-demokit
> Demo tookit 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-demokit
```

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

## properties
| Name        | Type    | Required | Default                                                             | Description                           |
| ----------- | ------- | -------- | ------------------------------------------------------------------- | ------------------------------------- |
| className   | string  | false    | -                                                                   | The extended className for component. |
| url         | string  | false    | -                                                                   | The github homepage url.              |
| title       | string  | false    | -                                                                   | The compoennt name.                   |
| description | string  | false    | -                                                                   | The component description.            |
| element     | element | false    | <img width="160" src="https://create-react-app.dev/img/logo.svg" /> | Main element.                         |


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

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

  class App extends React.Component {
    render() {
      return (
        <div className="app-container">
          <ReactDemokit
            title="react demokit"
            description={pkg.description}
            className="p-6">
            <button className="button">I'm the component 🐶</button>
          </ReactDemokit>
        </div>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-demokit
[download-url]: https://www.npmjs.com/package/@feizheng/react-demokit
npm package: @feizheng/react-digital-clock
Description: A beautiful digital clock for react.
Author: afei
Latest version: 1.0.0

# react-digital-clock
> A beautiful digital clock for react.

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

## update
```shell
npm update @feizheng/react-digital-clock
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| value     | string | -       | Default value.                        |
| onChange  | func   | -       | The change handler.                   |


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

  // customize your styles:
  $react-digital-clock-options: ()
  ```
2. import js
  ```js
  import ReactDigitalClock from '@feizheng/react-digital-clock';
  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">
          <ReactDigitalClock value="2018-06-23 11:03:11" />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-digital-clock/

## resources
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
- https://www.valentinog.com/blog/react-webpack-babel/
- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
- https://testing-library.com/docs/react-testing-library/api

## todos
- [ ] Add: semver number for every build files.
- [ ] Add: need output css files.
- [ ] Add: PWA support for docs.
- [ ] Add: source.map file for dist(`you can upload for production debug`).
- [ ] BUG: npm run dev will clean dist.
npm package: @feizheng/react-digital-numeric
Description: Numeric & time & date use react digital.
Author: afei
Latest version: 1.0.0

# react-digital-numeric
> Numeric & time & date use react digital.

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

## update
```shell
npm update @feizheng/react-digital-numeric
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| value     | any    | -       | Default value.                        |
| onChange  | func   | -       | The change handler.                   |
| flat      | bool   | -       | If digit equal width.                 |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-digital/dist/style.scss";
  @import "~@feizheng/react-digital-numeric/dist/style.scss";
  
  // customize your styles:
  $react-digital-numeric-options: ()
  ```
2. import js
  ```js
  import ReactDigitalNumeric from '@feizheng/react-digital-numeric';
  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">
          <ReactDigitalNumeric value="2018-12-08" ref="rc" />
          <div className="blank-20" />
          <ReactDigitalNumeric value="14:20:12.120" ref="rc" />

          <div className="blank-20" />
          <div className="blank-20" />

          <ReactDigitalNumeric flat value="2018-12-08" ref="rc" />
          <div className="blank-20" />
          <ReactDigitalNumeric flat value="14:20:12.120" ref="rc" />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-digital-numeric/
npm package: @feizheng/react-empty-state
Description: Empty state for react.
Author: afei
Latest version: 1.0.4

# react-empty-state
> Empty state 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-empty-state
```

## update
```shell
npm update @feizheng/react-empty-state
```

## properties
| Name      | Type    | Required | Default   | Description                           |
| --------- | ------- | -------- | --------- | ------------------------------------- |
| className | string  | false    | -         | The extended className for component. |
| centered  | bool    | false    | false     | If absoute center.                    |
| element   | element | false    | -         | The core element(picture).            |
| title     | union   | false    | 'No data' | The empty status title.               |


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

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

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

    componentDidMount() {
      NxOfflineSw.install({
        onUpdateReady: () => {
          this.setState({ hasUpdate: true });
        }
      });
    }

    render() {
      return (
        <div className="p-3 app-container">
          <ReactEmptyState centered title="暂无数据" />
          <ReactSwUpdateTips value={this.state.hasUpdate} />
          <ReactGithubCorner value="https://github.com/afeiship/react-empty-state" />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-empty-state/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-empty-state
[download-url]: https://www.npmjs.com/package/@feizheng/react-empty-state
npm package: @feizheng/react-error-boundary
Description: ErrorBoundary component for react.
Author: afei
Latest version: 1.0.0

# react-error-boundary
> ErrorBoundary component for react.

## installation
```shell
npm install -S @feizheng/react-error-boundary
```
## properties
| property  | type     | default | description              |
| --------- | -------- | ------- | ------------------------ |
| className | String   | -       | The extended classname   |
| error     | Function | -       | Error component replacer |
| onChange  | Function | -       | When error caught        |

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

  // customize your styles:
  $react-error-boundary-options: ()
  ```
2. import js
  ```js
  import ReactErrorBoundary from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import BuggyComponent from './buggy-component';
  import BuggyButton from './buggy-button';
  import './assets/style.scss';


  class App extends React.Component {
    onChange = inEvent => {
      console.log('error', inEvent);
    };

    render() {
      return (
        <div className="app-container">
          <ReactErrorBoundary onChange={this.onChange}>
            <BuggyComponent />
            <BuggyButton />
          </ReactErrorBoundary>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-error-boundary/

## resources
- http://react.html.cn/docs/error-boundaries.html
- https://codepen.io/gaearon/pen/wqvxGa?editors=0010
- https://juejin.im/post/5c00fc505188251d09201054
npm package: @feizheng/react-figure
Description: A tiny figure image for react.
Author: afei
Latest version: 1.0.1

# react-figure
> A tiny figure image for react.

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

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

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| caption   | any    | -       | Default image caption.                |


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

  // customize your styles:
  $react-figure-options: ()
  ```
2. import js
  ```js
  import ReactFigure from '@feizheng/react-figure';
  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">
          <ReactFigure caption="test picture">
            <img
              src="https://miro.medium.com/max/2798/1*RAa-e7v7WghBqatRXBy3WQ.jpeg"
              alt=""
            />
          </ReactFigure>
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-figure/
npm package: @feizheng/react-full-image
Description: Full page background image for react.
Author: afei
Latest version: 1.0.0

# react-full-image
> Full page background image for react.

## installation
```shell
npm install -S @feizheng/react-full-image
```
## properties
| property        | type | description |
| --------------- | ---- | ----------- |
| className       | -    | -           |
| value           | -    | -           |
| onChange        | -    | -           |

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

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

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

## documentation
- https://afeiship.github.io/react-full-image/

## resources
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
- https://www.valentinog.com/blog/react-webpack-babel/
- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
- https://testing-library.com/docs/react-testing-library/api

## todos
- [ ] Add: semver number for every build files.
- [ ] Add: need output css files.
- [ ] Add: PWA support for docs.
- [ ] Add: source.map file for dist(`you can upload for production debug`).
- [ ] BUG: npm run dev will clean dist.
npm package: @feizheng/react-i18next-provider
Description: I18next provider for next.
Author: afei
Latest version: 1.0.3

# react-i18next-provider
> I18next provider for next.

## installation
```shell
npm install -S @feizheng/react-i18next-provider
```
## properties
| property    | type | description |
| ----------- | ---- | ----------- |
| value       | -    | -           |
| onChange    | -    | -           |
| resources   | -    | -           |
| i18nOptions | -    | -           |
| children    | -    | -           |

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

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

  class App extends React.Component {
    state = {
      lang: 'zhCn',
      resources: {
        zhCn: {
          translation: require(`./assets/locale/zh_CN.json`)
        },
        zhTw: {
          translation: require(`./assets/locale/zh_TW.json`)
        },
        en: {
          translation: require(`./assets/locale/en.json`)
        }
      }
    };

    onLangChange = (inEvent) => {
      console.log('lang:', inEvent.target.value);
    };

    onSelectChange = (inEvent) => {
      const { value } = inEvent.target;
      this.setState({ lang: value });
    };

    render() {
      const { lang } = this.state;
      return (
        <div className="app-container">
          <select value={lang} onChange={this.onSelectChange}>
            <option value="zhCn">Chinese</option>
            <option value="zhTw">Chinese TW</option>
            <option value="en">English</option>
          </select>
          <ReactI18nextProvider
            value={lang}
            onChange={this.onLangChange}
            resources={this.state.resources}>
            {() => {
              return (
                <p>
                  {i18next.t('hello')} - {i18next.t('world')}
                </p>
              );
            }}
          </ReactI18nextProvider>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-i18next-provider/


## resources
- https://github.com/i18next/react-i18next
- https://github.com/i18next/react-i18next/blob/master/src/I18nextProvider.js
- https://react.i18next.com/latest/translation-render-prop
npm package: @feizheng/react-if-else
Description: If else logic component for react.
Author: afei
Latest version: 1.2.0

# react-if-else
> If else logic component for react.

## install
```shell
npm install -S afeiship/react-if-else
```

## properties
| property  | type | description |
| --------- | ---- | ----------- |
| className | -    | -           |
| only      | -    | -           |
| virtual   | -    | -           |
| value     | -    | -           |


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

  // customize your styles:
  $react-if-else-options: ()
  ```
2. import js
  ```js
  import ReactIfElse from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import noop from '@feizheng/noop';
  import './assets/style.scss';

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

    render() {
      return (
        <div className="app-container">
          <h1>Status: {String(this.state.value)}</h1>
          <p>
            <span
              onClick={() => {
                this.setState({ value: !this.state.value });
              }}>
              <input type="checkbox" onChange={noop} checked={this.state.value} />
              <strong>改变状态</strong>
            </span>
          </p>
          <p>
            <input
              type="checkbox"
              value={this.state.checked}
              onChange={() => {
                this.setState({ checked: !this.state.checked });
              }}
            />
            点前面的切换
          </p>
          <ReactIfElse virtual value={this.state.value}>
            <span>When Truthy</span>
            <span>When Falsly</span>
          </ReactIfElse>
          <ReactIfElse only value={this.state.checked}>
            <span>When checked, i will show!</span>
          </ReactIfElse>
        </div>
      );
    }
  }

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

## documentation
- https://afeiship.github.io/react-if-else/
npm package: @feizheng/react-image
Description: Better image for react.
Author: afei
Latest version: 1.0.0

# react-image
> Better image for react.

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

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

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| value     | object | null    | Default value.                        |
| onChange  | func   | noop    | The change handler.                   |


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

  // customize your styles:
  $react-image-options: ()
  ```
2. import js
  ```js
  import ReactImage from '@feizheng/react-image';
  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">
          <ReactImage />
        </div>
      );
    }
  }

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

  ```

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

## resources
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
- https://www.valentinog.com/blog/react-webpack-babel/
- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
- https://testing-library.com/docs/react-testing-library/api

## todos
- [ ] Add: semver number for every build files.
- [ ] Add: need output css files.
- [ ] Add: PWA support for docs.
- [ ] Add: source.map file for dist(`you can upload for production debug`).
- [ ] BUG: npm run dev will clean dist.
npm package: @feizheng/react-input
Description: Pure input for react.
Author: afei
Latest version: 1.0.0

# react-input
> Pure input for react.

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

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

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

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

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

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

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