open-index/open-npm huggingface dataset:
npm package: @jswork/rctpl-ant-select-default
Description: React teamplate for ant select value/label.
Latest version: 1.0.4

# rctpl-ant-select-default
> React teamplate for ant select value/label.

[![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 @jswork/rctpl-ant-select-default
```

## properties
| 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.                   |


## usage
1. import css
  ```scss
  @import "~@jswork/boilerplate-react-component/dist/style.css";

  // or use sass
  @import "~@jswork/boilerplate-react-component/dist/style.scss";

  // customize your styles:
  $boilerplate-react-component-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import RctplAntSelectDefault from '../@jswork/boilerplate-react-component';
  import styled from 'styled-components';

  const Container = styled.div`
    width: 80%;
    margin: 30px auto 0;
  `;

  export default (props: any) => {
    return (
      <Container>
        <RctplAntSelectDefault />
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/rctpl-ant-select-default
[download-url]: https://www.npmjs.com/package/@jswork/rctpl-ant-select-default
npm package: @jswork/rctpl-ant-tree-default
Description: Antd tree default template.
Latest version: 1.0.2

# rctpl-ant-tree-default
> Antd tree default template.

[![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 @jswork/rctpl-ant-tree-default
```

## properties
| 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.                   |


## usage
1. import css
  ```scss
  @import "~@jswork/boilerplate-react-component/dist/style.css";

  // or use sass
  @import "~@jswork/boilerplate-react-component/dist/style.scss";

  // customize your styles:
  $boilerplate-react-component-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import RctplAntTreeDefault from '../@jswork/boilerplate-react-component';
  import styled from 'styled-components';

  const Container = styled.div`
    width: 80%;
    margin: 30px auto 0;
  `;

  export default (props: any) => {
    return (
      <Container>
        <RctplAntTreeDefault />
      </Container>
    );
  };

  ```

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

[version-image]: https://img.shields.io/npm/v/@jswork/rctpl-ant-tree-default
[version-url]: https://npmjs.org/package/@jswork/rctpl-ant-tree-default

[license-image]: https://img.shields.io/npm/l/@jswork/rctpl-ant-tree-default
[license-url]: https://github.com/afeiship/rctpl-ant-tree-default/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/rctpl-ant-tree-default
[size-url]: https://github.com/afeiship/rctpl-ant-tree-default/blob/master/dist/rctpl-ant-tree-default.min.js

[download-image]: https://img.shields.io/npm/dm/@jswork/rctpl-ant-tree-default
[download-url]: https://www.npmjs.com/package/@jswork/rctpl-ant-tree-default
npm package: @jswork/react-ant-autocomplete3
Description: Autocomplete for antd with keyword filter for antd v3.
Latest version: 1.0.1

# react-ant-autocomplete3
> Autocomplete for antd with keyword filter for antd v3.

[![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 @jswork/react-ant-autocomplete3
```

## usage
1. import css
  ```scss
  @import "~@jswork/boilerplate-react-component/dist/style.css";

  // or use sass
  @import "~@jswork/boilerplate-react-component/dist/style.scss";

  // customize your styles:
  $boilerplate-react-component-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactAntAutocomplete3 from '@jswork/boilerplate-react-component';
  import styled from 'styled-components';

  const Container = styled.div`
    width: 80%;
    margin: 30px auto 0;
  `;

  export default (props: any) => {
    return (
      <Container>
        <ReactAntAutocomplete3 />
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/boilerplate-react-component/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-autocomplete3
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-autocomplete3
npm package: @jswork/react-ant-card
Description: Card wrapper for ant.
Author: afei
Latest version: 1.0.0

# react-ant-card
> Card wrapper for ant.

[![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 @jswork/react-ant-card
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| padding   | bool   | false    | false   | If ant-card-body should have padding. |


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

  // or use sass
  @import "~@jswork/react-ant-card/dist/style.scss";

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-card">
          <ReactAntCard title="道" padding>
            <p>
              道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。
            </p>
            <p>故常无欲，以观其妙，常有欲，以观其徼。</p>
            <p>此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。</p>
          </ReactAntCard>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# react-ant-checkbox
> Checkbox for antd.

[![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 @jswork/react-ant-checkbox
```

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


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

  // or use sass
  @import "~@jswork/react-ant-checkbox/dist/style.scss";

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

  class App extends React.Component {
    state = { value: false };
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-checkbox">
          <article class="message is-info">
            <div class="message-header">Output</div>
            <div class="message-body">
              <ReactAntCheckbox
                value={this.state.value}
                onChange={(e) => {
                  this.setState({ value: e.target.value });
                }}
              >
                轻轻的点击我
              </ReactAntCheckbox>
            </div>
          </article>

          <article class="message">
            <div class="message-header">Output</div>
            <div class="message-body">{JSON.stringify(this.state.value)}</div>
          </article>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-checkbox
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-checkbox
npm package: @jswork/react-ant-color-picker
Description: Color picker for ant project.
Author: afei
Latest version: 1.0.0

# react-ant-color-picker
> Color picker for ant project.

[![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 @jswork/react-ant-color-picker
```

## properties
| Name      | Type   | Required | Default   | Description                           |
| --------- | ------ | -------- | --------- | ------------------------------------- |
| className | string | false    | -         | The extended className for component. |
| label     | string | false    | 'Select'  | The select label text.                |
| value     | string | false    | '#FFFFFF' | The runtime color.                    |
| onChange  | func   | false    | noop      | The handler when value chnage.        |
| placement | string | false    | 'bottom'  | The placement for popover.            |


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

  // or use sass
  @import "~@jswork/react-ant-color-picker/dist/style.scss";

  // customize your styles:
  $react-ant-color-picker-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntColorPicker from '@jswork/react-ant-color-picker';
  import './assets/style.scss';

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

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

    render() {
      const _value = this.state.value;
      return (
        <ReactDemokit
          className="p-3 app-container"
          style={{ background: _value }}
          url="https://github.com/afeiship/react-ant-color-picker">
          <ReactAntColorPicker value={_value} onChange={this.onChange} />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-color-picker
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-color-picker
npm package: @jswork/react-ant-confirm
Description: Popconfirm quick wrapper.
Author: afei
Latest version: 1.0.0

# react-ant-confirm
> Popconfirm quick wrapper.

[![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 @jswork/react-ant-confirm
```

## properties
| Name       | Type   | Required | Default              | Description                           |
| ---------- | ------ | -------- | -------------------- | ------------------------------------- |
| className  | string | false    | -                    | The extended className for component. |
| title      | string | false    | '确认执行这个操作？' | PopopConfirm title.                   |
| type       | enum   | false    | 'link'               | Button/link style.                    |
| childProps | object | false    | {}                   | The children props.                   |


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

  // or use sass
  @import "~@jswork/react-ant-confirm/dist/style.scss";

  // customize your styles:
  $react-ant-confirm-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { message, Popconfirm } from 'antd';
  import ReactAntConfirm from '@jswork/react-ant-confirm';

  import './assets/style.scss';

  class App extends React.Component {
    handleClick = () => {
      message.success('你执行了 confirm 操作~');
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-confirm">
          <div className="is-actions">
            <ReactAntConfirm onClick={this.handleClick}>删除</ReactAntConfirm>
            <ReactAntConfirm type="button" onClick={this.handleClick}>
              取消
            </ReactAntConfirm>

            <Popconfirm title="你请确认你的操作" onConfirm={this.handleClick}>
              <button className="button is-primary">
                完全自定义直接用antd原生的
              </button>
            </Popconfirm>
          </div>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# react-ant-date-picker
> React ant date picker.

[![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 @jswork/react-ant-date-picker
```

## properties
| Name      | Type   | Required | Default      | Description                           |
| --------- | ------ | -------- | ------------ | ------------------------------------- |
| className | string | false    | -            | The extended className for component. |
| value     | string | false    | -            | The changed value.                    |
| onChange  | func   | false    | noop         | The change handler.                   |
| format    | string | false    | 'YYYY-MM-DD' | The datepicker format.                |


## usage
1. import css
  ```scss
  @import "~@jswork/react-ant-date-picker/dist/style.css";

  // or use sass
  @import "~@jswork/react-ant-date-picker/dist/style.scss";

  // customize your styles:
  $react-ant-date-picker-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntDatePicker from '@jswork/react-ant-date-picker';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: '2021-05-21 15:19:15'
    };
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-date-picker">
          <ReactAntDatePicker
            format="YYYY-MM-DD HH:mm:ss"
            value={this.state.value}
            onChange={(e) => {
              console.log('event :=>', e.target.value);
            }}
            className="mb-5 has-text-white"
          />
          <button className="button is-primary is-fullwidth">Start~</button>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-date-picker
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-date-picker
npm package: @jswork/react-ant-editable-tag
Description: Editable tag for ant.
Author: afei
Latest version: 1.0.0

# react-ant-editable-tag
> Editable tag for ant.

[![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 antd@3
npm install -S @jswork/react-ant-editable-tag
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| onClose   | func   | false    | noop    | When click close icon.                |
| value     | union  | false    | -       | The tag value.                        |
| onChange  | func   | false    | noop    | When value changed.                   |


## usage
1. import css
  ```scss
  @import "~@jswork/react-ant-editable-tag/dist/style.css";

  // or use sass
  @import "~@jswork/react-ant-editable-tag/dist/style.scss";

  // customize your styles:
  $react-ant-editable-tag-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntEditableTag from '@jswork/react-ant-editable-tag';
  import './assets/style.scss';

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

    setRandomValue = () => {
      this.setState({
        value: (Math.random() + 'value').slice(0, 5)
      });
    };

    render() {
      const { value } = this.state;
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-editable-tag">
          <button className="button is-primary is-fullwidth mb-2" onClick={this.setRandomValue}>
            SetRandomValue
          </button>
          <ReactAntEditableTag
            value={value}
            onChange={(e) => {
              this.setState({ value: e.target.value });
              console.log(e.target.value);
            }}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-editable-tag
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-editable-tag
npm package: @jswork/react-ant-form-schema
Description: Antd form builder for react.
Latest version: 1.0.27

# react-ant-form-schema
> Antd form builder for react.

## installation
```shell
yarn add @jswork/react-ant-form-schema
```

## setup
```ts
import { config as niceFormConfig } from '@ebay/nice-form-react';
import antdAdapter from '@ebay/nice-form-react/adapters/antdAdapter';

niceFormConfig.addAdapter(antdAdapter);
```
npm package: @jswork/react-ant-image-pop-view
Description: Ant popover view image for react.
Author: afei
Latest version: 1.0.0

# react-ant-image-pop-view
> Ant popover view image 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 @jswork/react-ant-image-pop-view
```

## properties
| Name      | Type   | Required | Default    | Description                           |
| --------- | ------ | -------- | ---------- | ------------------------------------- |
| className | string | false    | -          | The extended className for component. |
| placement | string | false    | 'rightTop' | Placement for antd.                   |
| size      | array  | false    | [100]      | Thumbnail size.                       |
| popSize   | array  | false    | [100]      | Popup picture size.                   |
| thumbnail | string | false    | -          | The thumbnail/popup pictures.         |
| src       | string | true     | -          | The popup original picutrel.          |


## usage
1. import css
  ```scss
  @import "~@jswork/react-ant-image-pop-view/dist/style.css";

  // or use sass
  @import "~@jswork/react-ant-image-pop-view/dist/style.scss";

  // customize your styles:
  $react-ant-image-pop-view-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import NxRandomAvatar from '@jswork/next-random-avatar';
  import ReactAntImagePopView from '@jswork/react-ant-image-pop-view';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      const img = NxRandomAvatar.lego();
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-image-pop-view">
          <ReactAntImagePopView
            thumbnail={img}
            src={img}
            size={[100, 100]}
            popSize={[300, 300]}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-image-pop-view
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-image-pop-view
npm package: @jswork/react-ant-input-number
Description: Input number for react.
Author: afei
Latest version: 1.0.0

# react-ant-input-number
> Input number 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 @jswork/react-ant-input-number
```

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


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

  // or use sass
  @import "~@jswork/react-ant-input-number/dist/style.scss";

  // customize your styles:
  $react-ant-input-number-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntInputNumber from '@jswork/react-ant-input-number';
  import './assets/style.scss';

  class App extends React.Component {
    handleChange = (e) => {
      console.log(e.target.value);
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-input-number">
          <ReactAntInputNumber className="is-fullwidth mb-2" placeholder="Input your number." onChange={this.handleChange} />
          <ReactAntInputNumber
            className="is-fullwidth"
            defaultValue={100}
            min={0}
            max={100}
            formatter={(value) => `${value}%`}
            parser={(value) => value.replace('%', '')}
            onChange={this.handleChange}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-input-number
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-input-number
npm package: @jswork/react-ant-input-search
Description: Ant input search box optimize.
Author: afei
Latest version: 1.0.4

# react-ant-input-search
> Ant input search box optimize.

[![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 @jswork/react-ant-input-search
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| onSearch  | func   | false    | noop    | The search handler.                   |


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

  // or use sass
  @import "~@jswork/react-ant-input-search/dist/style.scss";

  // customize your styles:
  $react-ant-input-search-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import ReactAntInputSearch from '@jswork/react-ant-input-search';
  import './assets/style.scss';

  class App extends React.Component {
    handleChange = (inEvent) => {
      const { value } = inEvent.target;
      console.log('change:', value);
    };

    handleSearch = (inEvent) => {
      const { value } = inEvent.target;
      console.log('search.', value);
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-input-search">
          <ReactAntInputSearch
            placeholder="input search text"
            allowClear
            enterButton
            className="bg-gray-800 mb-5 text-white"
            onChange={this.handleChange}
            onSearch={this.handleSearch}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-input-search
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-input-search
npm package: @jswork/react-ant-menu-burger
Description: A hamburger for menu expand/collapse.
Author: afei
Latest version: 1.0.1

# react-ant-menu-burger
> A hamburger for menu expand/collapse.

[![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 @jswork/react-ant-menu-burger
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| disabled  | bool   | false    | false   | If onClick works.                     |
| value     | bool   | false    | false   | Default value.                        |
| onChange  | func   | false    | noop    | The change handler.                   |
| elements  | array  | false    | []      | The menu fold/unfold elements.        |


## usage
1. import css
  ```scss
  @import "~@jswork/react-ant-menu-burger/dist/style.css";

  // or use sass
  @import "~@jswork/react-ant-menu-burger/dist/style.scss";

  // customize your styles:
  $react-ant-menu-burger-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntMenuBurger from '@jswork/react-ant-menu-burger';
  import ReactAdminIcons from '@jswork/react-admin-icons';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-menu-burger">
          <ReactAntMenuBurger
            elements={[
              <ReactAdminIcons value="shrink-right" />,
              <ReactAdminIcons value="spread-left" />
            ]}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-menu-burger
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-menu-burger
npm package: @jswork/react-ant-pre-select-input
Description: Preselect with input for antd.
Latest version: 1.0.0

# react-ant-pre-select-input
> Preselect with input for antd.

[![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 @jswork/react-ant-pre-select-input
```

## usage
1. import css
  ```scss
  @import "~@jswork/boilerplate-react-component/dist/style.css";

  // or use sass
  @import "~@jswork/boilerplate-react-component/dist/style.scss";

  // customize your styles:
  $boilerplate-react-component-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactAntPreSelectInput from '@jswork/boilerplate-react-component';
  import styled from 'styled-components';

  const Container = styled.div`
    width: 80%;
    margin: 30px auto 0;
  `;

  export default (props: any) => {
    return (
      <Container>
        <ReactAntPreSelectInput />
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/boilerplate-react-component/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-pre-select-input
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-pre-select-input
npm package: @jswork/react-ant-rate
Description: Rate for react.
Author: afei
Latest version: 1.0.0

# react-ant-rate
> Rate 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 @jswork/react-ant-rate
```

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


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

  // or use sass
  @import "~@jswork/react-ant-rate/dist/style.scss";

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

  class App extends React.Component {
    state = { value: 3 };
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-rate">
          <article class="message is-info">
            <div class="message-header">Value changed:</div>
            <div class="message-body">
              <ReactAntRate
                className="mb-5"
                value={this.state.value}
                onChange={(e) => {
                  this.setState({ value: e.target.value });
                }}
              />
            </div>
          </article>

          <article class="message">
            <div class="message-header">Value changed:</div>
            <div class="message-body">{JSON.stringify(this.state.value)}</div>
          </article>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-rate
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-rate
npm package: @jswork/react-ant-resource-form
Description: Antd form builder for resource form.
Latest version: 1.0.44

# react-ant-resource-form
> Antd form builder for resource form.

## installation
```shell
yarn add @jswork/react-ant-resource-form
```

## setup
```ts
import { config as niceFormConfig } from '@ebay/nice-form-react';
import antdAdapter from '@ebay/nice-form-react/adapters/antdAdapter';

niceFormConfig.addAdapter(antdAdapter);
```

## tsconfig
```json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    // 这一行是关键配置
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src", "node_modules/@jswork"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}
```
npm package: @jswork/react-ant-status-switch
Description: React status swicher component based on antd.
Latest version: 1.0.3

# react-ant-status-switch
> React status swicher component based on antd.

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

## installation
```shell
yarn add @jswork/react-ant-status-switch
```

## usage
1. import js
  ```js
  import React, { useState } from 'react';
  import ReactAntStatusSwitch from '@/main';
  import styled from 'styled-components';
  import { Button } from 'antd';

  const Container = styled.div`
    width: 80%;
    margin: 100px auto 0;
    p {
      margin-top: 10px;
    }
  `;

  const items = [
    {
      value: 'default',
      label: '默认 🤡'
    },
    {
      value: 'success',
      label: '成功 😎'
    },
    {
      value: 'warning',
      label: '警告 🥸'
    },
    {
      value: 'error',
      label: '失败 😤'
    },
    {
      value: 'customize',
      color: '#080',
      label: '自定义状态 🤩'
    }
  ];

  export default () => {
    const [val, setVal] = useState('success');
    return (
      <Container>
        <p>轻轻的移向我，我会改变状态滴.</p>
        <ReactAntStatusSwitch
          value={val}
          items={items}
          layout={'flat'}
          popoverOpts={{ placement: 'top' }}
          onChange={(e) => {
            console.log('e.', e.target.value);
            setVal(e.target.value);
          }}
        />

        <ReactAntStatusSwitch
          value={val}
          items={items}
          layout={'popover'}
          popoverOpts={{ placement: 'top' }}
          onChange={(e) => {
            console.log('e.', e.target.value);
            setVal(e.target.value);
          }}
        />

        <p>
          Current status: <strong>{val}</strong>
        </p>

        <p>Only tag status</p>

        <ReactAntStatusSwitch value={val} items={items} layout={'tag'} />

        <p>
          <Button type="primary" onClick={() => setVal('success')}>
            Force to Set status
          </Button>
        </p>
      </Container>
    );
  };

  ```

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

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ant-status-switch
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-status-switch
npm package: @jswork/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 @jswork/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 "~@jswork/react-ant-switch/dist/style.css";

  // or use sass
  @import "~@jswork/react-ant-switch/dist/style.scss";

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-switch">
          <ReactAntSwitch
            onChange={(e) => {
              console.log('value:', e.target.value);
            }}
          />
        </ReactDemokit>
      );
    }
  }

  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/@jswork/react-ant-switch
[version-url]: https://npmjs.org/package/@jswork/react-ant-switch

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

[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/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/@jswork/react-ant-switch
[download-url]: https://www.npmjs.com/package/@jswork/react-ant-switch