open-index/open-npm huggingface dataset:
npm package: @jswork/react-ant-table
Description: Antd table.
Latest version: 1.0.1

# react-ant-table
> Antd table.

[![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-table
```

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

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

  // customize your styles:
  $react-ant-table-options: ()
  ```
2. import js
  ```js
  import React, { useState, useEffect } from 'react';
  import ReactAntTable from '@jswork/react-ant-table';
  import '../../src/components/style.scss';
  import styled from 'styled-components';
  import nxColumn from '@jswork/next-ant-column';
  const Container = styled.div`
    width: 80%;
    margin: 30px auto 0;
    height: 100vh;
    border: 1px solid #ccc;
  `;

  export default (props: any) => {
    const [dataSource, setDataSource] = useState([]);
    const columns = [nxColumn('ID', 'id'), nxColumn('Title', 'title'), nxColumn('UserId', 'userId')];

    useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then((r) => r.json())
        .then((res) => {
          setDataSource(res);
        });
    }, []);

    return (
      <Container>
        <ReactAntTable
          columns={columns}
          dataSource={dataSource}
          pagination={{ pageSize: 15 }}
          rowKey="id"
        />
      </Container>
    );
  };

  ```

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

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

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

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

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

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

# react-ant-url-input
> Url input 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 antd@3
npm install -S @jswork/react-ant-url-input
```

## properties
| Name         | Type   | Required | Default | Description                           |
| ------------ | ------ | -------- | ------- | ------------------------------------- |
| className    | string | false    | -       | The extended className for component. |
| onAddonClick | func   | false    | -       | When addonAfter button click.         |


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-url-input">
          <ReactAntUrlInput />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# react-blank
> Blank 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-blank
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | number | false    | -       | The blank height.                     |
| unit      | string | false    | 'px'    | The height style unit.                |


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-blank">
          <article className="message is-info">
            <div className="message-header">Article</div>
            <div className="message-body">
              <p>
                少年时，想碰到一个聂小倩，拼了性命爱一场，天亮前带着她的魂魄远走他乡。
              </p>
              <ReactBlank value={100} className="my-3 has-background-white"/>
              <p>
                青年时，想碰到一个白素贞，家大业大，要啥有啥，吃完软饭一抹嘴，还有人负责把她关进雷峰塔。
                中年时，想要一个田螺姑娘，温婉可人，红袖添香，半夜写累了，让她变回原形，加干辣椒、花椒、姜、蒜片爆炒，淋入香油，起锅装盘。
              </p>
            </div>
          </article>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# 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 @jswork/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 "~@jswork/wsui-card/dist/style.scss";

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-card">
          <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>
        </ReactDemokit>
      );
    }
  }

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

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

[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/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/@jswork/react-card
[download-url]: https://www.npmjs.com/package/@jswork/react-card
npm package: @jswork/react-checkbox
Description: Pure checkbox for react.
Latest version: 1.0.4

# react-checkbox
> Pure checkbox 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-checkbox
```

## 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 ReactCheckbox 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>
        <ReactCheckbox />
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-checkbox
[download-url]: https://www.npmjs.com/package/@jswork/react-checkbox
npm package: @jswork/react-checkbox-group
Description: Checkbox/checkbox group component for react.
Latest version: 1.0.5

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

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

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

## 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 ReactCheckboxGroup 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>
        <ReactCheckboxGroup />
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-checkbox-group
[download-url]: https://www.npmjs.com/package/@jswork/react-checkbox-group
npm package: @jswork/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.

[![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-clipboard
```

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


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

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

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

  class App extends React.Component {
    state = {
      value: `道可道，非常道；名可名，非常名。
  无名，天地之始，有名，万物之母。
  故常无欲，以观其妙，常有欲，以观其徼。
  此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。`
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-clipboard">
          <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>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-clipboard
[download-url]: https://www.npmjs.com/package/@jswork/react-clipboard
npm package: @jswork/react-codeflask
Description: A micro code-editor for awesome web pages.
Latest version: 1.1.2

# react-codeflask
> A micro code-editor for awesome web pages.

[![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-codeflask
```

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

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

  // customize your styles:
  $react-codeflask-options: ()
  ```
2. import js
  ```js
  import React, { useState } from 'react';
  import ReactCodeflask from '@jswork/react-codeflask';
  import '../../src/components/style.scss';
  import styled from 'styled-components';
  // import 'prismjs/themes/prism.css';

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

    > .is-actions {
      margin-top: 10px;
    }
  `;

  export default () => {
    const [val, setVal] = useState(
      `curl 'https://api.cdnjs.com/libraries/backbone.js/tutorials/this-tutorial-doesnt-exist' | json`
    );
    return (
      <Container>
        <ReactCodeflask
          value={val}
          height={0}
          language="js"
          onChange={(e) => {
            // console.log('current value:', e.target.value);
            setVal(e.target.value);
          }}
        />

        <div className="is-actions">
          <button
            onClick={(e) => {
              setVal('const for="bar"; \nlet bar="bc";');
            }}>
            Set value.
          </button>
        </div>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-codeflask/

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

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

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

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

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

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

[![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-color-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.                   |


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

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

  // customize your styles:
  $react-color-picker-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@jswork/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactColorPicker from '@jswork/react-color-picker';
  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 (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-color-picker"
          style={{ background: value }}>
          <ReactColorPicker value={value} onChange={this.onChange} />
          <div className="is-label">{value}</div>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-color-picker
[download-url]: https://www.npmjs.com/package/@jswork/react-color-picker
npm package: @jswork/react-command-manager
Description: React command manager.
Latest version: 1.2.1

# react-command-manager
> React command manager.

[![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-command-manager
```

## usage
import js
  ```js
  import React from 'react';
  import { scanVite } from '@jswork/scan-modules';
  import nx from '@jswork/next';
  import ReactCommandManager from '@jswork/react-command-manager';

  const moduleFiles = import.meta.glob('./shared/commands/**/*.ts', { eager: true });
  const modules = scanVite(moduleFiles, { modules: '/commands/' });

  export default () => {
    return (
      <div className="m-10 p-4 shadow bg-gray-100 text-gray-800 hover:shadow-md transition-all">
        <button onClick={() => nx.$exec('user.login')} className="btn btn-primary">User Login</button>
        <div className="y-2">
          <h3>Posts</h3>
          <nav className="x-2">
            <button className="btn btn-sm btn-secondary" onClick={() => nx.$exec('post.create')}>New Post</button>
            <button className="btn btn-sm btn-secondary"
                    onClick={() => nx.$exec('post.update', { title: 'New Title' })}>Update Post
            </button>
          </nav>
        </div>
        <div className="y-2">
          <h3>Products</h3>
          <nav className="x-2">
            <button className="btn btn-sm btn-secondary" onClick={() => nx.$exec('productCompare.add')}>Add to compare
            </button>
            <button className="btn btn-sm btn-secondary" onClick={() => nx.$exec('productCompare.remove')}>Remove from
              compare
            </button>
          </nav>
        </div>
        <ReactCommandManager modules={modules} />
      </div>
    );
  };

  ```

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

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-component-mono-lib
[download-url]: https://www.npmjs.com/package/@jswork/react-component-mono-lib
npm package: @jswork/react-copied
Description: Copy to copied for react.
Latest version: 1.0.1

# react-copied
> Copy to copied 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-copied
```

## properties
__GENERATE_DOCS__

## 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
__GENERATE_DAPP__
  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-copied
[download-url]: https://www.npmjs.com/package/@jswork/react-copied
npm package: @jswork/react-demokit
Description: Demo tookit for react.
Author: afei
Latest version: 1.0.2

# 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 @jswork/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 "~@jswork/react-github-corner/dist/style.scss";
  @import "~@jswork/react-sw-update-tips/dist/style.scss";
  @import "~@jswork/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 '@jswork/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/@jswork/react-demokit
[version-url]: https://npmjs.org/package/@jswork/react-demokit

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

[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/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/@jswork/react-demokit
[download-url]: https://www.npmjs.com/package/@jswork/react-demokit
npm package: @jswork/react-dialog
Description: A react dialog based on HTML dialog.
Latest version: 1.1.15

# react-dialog
> A react dialog based on HTML dialog.

[![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-dialog
```

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

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

  // customize your styles:
  $react-dialog-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactDialog from '../../src/main';
  import styled from 'styled-components';
  import '@jswork/react-backdrop/dist/style.css';

  const Container = styled.div`
      width: 80%;
      height: 80vh;
      border: 1px solid #ccc;
      position: relative;
      margin: 30px auto 0;

      nav {
          position: fixed;
          z-index: 100;
      }
  `;

  export default () => {
    const [visible, setVisible] = React.useState(true);

    const handleOpen = () => {
      setVisible(true);
    };

    const handleClose = () => {
      setVisible(false);
    };

    return (
      <Container>
        <button onClick={handleOpen}>Open</button>
        <ReactDialog visible={visible} withBackdrop keepMounted closeOnBackdropClick onClose={handleClose}>
          <ul>
            <li>道可道，非常道；名可名，非常名。</li>
            <li>无名，天地之始，有名，万物之母。</li>
            <li>故常无欲，以观其妙，常有欲，以观其徼。</li>
            <li>此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。</li>
          </ul>
          <nav>
            <button onClick={handleClose}>Close</button>
          </nav>
        </ReactDialog>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-dialog/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-dialog
[download-url]: https://www.npmjs.com/package/@jswork/react-dialog
npm package: @jswork/react-dice
Description: Dice for react.
Author: afei
Latest version: 1.0.2

# react-dice
> Dice 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-dice
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | number | false    | 1       | The changed value.                    |
| onChange  | func   | false    | noop    | The change handler.                   |
| disabled  | bool   | false    | false   | If dice can be click.                 |
| duration  | number | false    | 500     | The dice rotate speed.                |
| timeout   | number | false    | 2000    | The timeout timing.                   |


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

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

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

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

    handleChange = (e) => {
      this.setState({ value: e.target.value });
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-dice">
          <h1 className="title">骰子</h1>
          <h2 className="subtitle">😎点击开始玩吧~</h2>
          <div className="box">
            <ReactDice value={this.state.value} onChange={this.handleChange} />
          </div>

          <h1 className="text-center text-white">
            <span className="tag is-danger" style={{ fontSize: 80 }}>
              {this.state.value}
            </span>
          </h1>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-dice
[download-url]: https://www.npmjs.com/package/@jswork/react-dice
npm package: @jswork/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.

[![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-digital-numeric
```

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


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-digital-numeric">
          <ReactDigitalNumeric className="mb-2" value="2018-12-08" />
          <hr />
          <ReactDigitalNumeric className="mb-2" value="14:20:12.120" />
          <hr />
          <ReactDigitalNumeric className="mb-2" flat value="2018-12-08" />
          <hr />
          <ReactDigitalNumeric className="mb-2" flat value="14:20:12.120" />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-digital-numeric
[download-url]: https://www.npmjs.com/package/@jswork/react-digital-numeric
npm package: @jswork/react-ellipsis-middle
Description: Ellipsis in middle for single line text.
Latest version: 1.0.1

# react-ellipsis-middle
> Ellipsis in middle for single line text.

[![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-ellipsis-middle
```

## 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 ReactEllipsisMiddle from '@jswork/boilerplate-react-component';
  import styled from 'styled-components';
  import '../../src/components/style.scss';

  const Container = styled.div`
    width: 600px;
    margin: 50px auto;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    resize: horizontal;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;

    .react-ellipsis-middle {
      cursor: pointer;
      &:hover {
        transition: all 0.5s ease;
        background-color: #f60;
      }
    }
  `;

  export default (props: any) => {
    return (
      <Container>
        <ReactEllipsisMiddle size="120px">
          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
          - 2021-03-26
        </ReactEllipsisMiddle>

        <ReactEllipsisMiddle size="50%">
          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
          - 2021-03-26
        </ReactEllipsisMiddle>

        <ReactEllipsisMiddle>CSS 实现优惠券的技巧 - 2021-03-26</ReactEllipsisMiddle>
        <ReactEllipsisMiddle minSize="40px">
          我是一个很长的文件，我是一个很长的文件，但请始终保持我的后缀名.pdf
        </ReactEllipsisMiddle>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-ellipsis-middle/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ellipsis-middle
[download-url]: https://www.npmjs.com/package/@jswork/react-ellipsis-middle
npm package: @jswork/react-fade-in-mask
Description: React fade in mask.
Author: afei
Latest version: 1.0.0

# react-fade-in-mask
> React fade in mask.

[![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-fade-in-mask
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | bool   | false    | false   | The visible value.                    |


## usage
1. import css
  ```scss
  @import "~@jswork/react-fade-in-mask/dist/style.css";

  // or use sass
  @import "~@jswork/react-fade-in-mask/dist/style.scss";

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

  class App extends React.Component {
    constructor(inProps) {
      super(inProps);
      this.state = {
        value: false
      };
    }

    handleMouseEnter = (e) => {
      this.setState({ value: true });
    };

    handleMouseLeave = (e) => {
      this.setState({ value: false });
    };

    render() {
      const { value } = this.state;
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-fade-in-mask">
          <div
            className="is-box-item"
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}>
            <img src="https://my.ishadowx.biz/img/portfolio/05-small.jpg" />
            <ReactFadeInMask value={value}>
              CONTENT FOR FADE_IN MASK!
            </ReactFadeInMask>
          </div>
        </ReactDemokit>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-fade-in-mask/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-fade-in-mask
[download-url]: https://www.npmjs.com/package/@jswork/react-fade-in-mask
npm package: @jswork/react-figure
Description: A tiny figure image for react.
Author: afei
Latest version: 1.0.0

# react-figure
> A tiny figure 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-figure
```

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


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

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

  // customize your styles:
  $react-figure-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 ReactFigure from '@jswork/react-figure';
  import './assets/style.scss';

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-figure">
          <ReactFigure caption="test picture">
            <img src={NxRandomAvatar.lego()} alt="" />
          </ReactFigure>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-figure
[download-url]: https://www.npmjs.com/package/@jswork/react-figure