open-index/open-npm huggingface dataset:
npm package: @jswork/react-radio-group
Description: Abstract radio component for react.
Latest version: 1.0.10

# react-radio-group
> Abstract radio 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-radio-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 ReactRadioGroup 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>
        <ReactRadioGroup />
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-radio-group
[download-url]: https://www.npmjs.com/package/@jswork/react-radio-group
npm package: @jswork/react-ratio-image
Description: Ratio image for react.
Author: afei
Latest version: 1.0.0

# react-ratio-image
> Ratio 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-ratio-image
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | number | false    | 1       | The ratio value.                      |


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ratio-image">
          <div className="is-box-item">
            <h2>Ratio: 0.5</h2>
            <ReactRatioImage value={0.5}>
              <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg" />
            </ReactRatioImage>

            <h2>Ratio: 1</h2>
            <ReactRatioImage value={1}>
              <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg" />
            </ReactRatioImage>

            <h2>Ratio: 2</h2>
            <ReactRatioImage value={2}>
              <img src="https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg" />
            </ReactRatioImage>
          </div>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-ratio-image
[download-url]: https://www.npmjs.com/package/@jswork/react-ratio-image
npm package: @jswork/react-render-controls
Description: A lightweight, headless React component library for declarative conditional rendering, pattern matching, and list mapping. SSR-friendly, zero UI, and fully type-safe.
Latest version: 1.2.6

# react-render-controls
> A lightweight, headless React component library for declarative conditional rendering, pattern matching, and list mapping. SSR-friendly, zero UI, and fully type-safe.

## installation
```shell
yarn add @jswork/react-render-controls
```
npm package: @jswork/react-searchlight
Description: Searchlight for react.
Author: afei
Latest version: 1.0.0

# react-searchlight
> Searchlight for react.

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

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

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


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

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

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

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

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

  ```

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


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

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

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

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

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

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

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

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-select
[download-url]: https://www.npmjs.com/package/@jswork/react-select
npm package: @jswork/react-static-container
Description: Static container for react.
Latest version: 1.0.3

# react-static-container
> Static container 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-static-container
```

## properties
| Name    | Type  | Required | Default        | Description                |
| ------- | ----- | -------- | -------------- | -------------------------- |
| as      | any   | false    | React.Fragment | The static node name.      |
| deps    | array | false    | []             | The deps of the component. |
| dynamic | bool  | false    | false          | The default should update. |


## 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, { useState } from 'react';
  import ReactStaticContainer from '../@jswork/boilerplate-react-component';
  import styled from 'styled-components';

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

  export default (props: any) => {
    const [count, setCount] = useState(10);
    const [id, setId] = useState(0);
    return (
      <Container>
        <button onClick={(e) => setCount(count + 1)}>Change Counter</button>
        <button onClick={(e) => setId(Date.now())}>Change Id</button>
        <p>
          I can not change.(except the first time.)
          <ReactStaticContainer>{count}</ReactStaticContainer>
        </p>
        <p>
          I can change.(Because i have deps changed.)
          <ReactStaticContainer deps={[id]}>{count}</ReactStaticContainer>
        </p>
        <p>
          <strong>I can change {count}</strong>
        </p>
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-static-container
[download-url]: https://www.npmjs.com/package/@jswork/react-static-container
npm package: @jswork/react-svg-icon
Description: Svg icon for react.
Author: afei
Latest version: 1.0.0

# react-svg-icon
> Svg icon 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-svg-icon
```

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


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-svg-icon">
          <div className="is-item">
            <ReactSvgIcon value="iconPaaS_test" />
            <ReactSvgIcon value="iconTPA-icon_huaban1" />
            <ReactSvgIcon value="iconTPA-icon_huaban1fuben17" />
          </div>

          <div className="is-item">
            <ReactSvgIcon value="icondiag_file_blue-74" size="20" />
            <ReactSvgIcon value="icondiag_parallel" size="40" />
            <ReactSvgIcon value="iconPaaS_group" size="50" />
          </div>
        </ReactDemokit>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-svg-icon/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-svg-icon
[download-url]: https://www.npmjs.com/package/@jswork/react-svg-icon
npm package: @jswork/react-sw-update-tips
Description: Update tips for service-worker.
Author: afei
Latest version: 1.0.0

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

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

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

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

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


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

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

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

    componentDidMount() {
      this.installSw();
    }

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

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

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-sw-update-tips
[download-url]: https://www.npmjs.com/package/@jswork/react-sw-update-tips
npm package: @jswork/react-textarea
Description: Textarea with autosize for react.
Latest version: 1.0.1

# react-textarea
> Textarea with autosize 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-textarea
```

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

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-textarea
[download-url]: https://www.npmjs.com/package/@jswork/react-textarea
npm package: @jswork/react-tiny-state
Description: Super simple state management for React apps.
Latest version: 1.1.2

# react-tiny-state
> Super simple state management for React apps.

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

## installation
```shell
npm install @jswork/react-tiny-state
```

## usage
```js
import reactTinyState from '@jswork/react-tiny-state';

// usage goes here.
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-tiny-state
[download-url]: https://www.npmjs.com/package/@jswork/react-tiny-state
npm package: @jswork/react-tip
Description: Tooltip for react based on ballon.css.
Author: afei
Latest version: 1.0.0

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

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

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| title     | string | false    | -       | The tooltip title.                    |
| placement | enum   | false    | 'up'    | The placement.                        |


## usage
1. import css
  ```scss
  // or use sass
  @import "balloon-css";
  @import "~@jswork/react-tip/dist/style.scss";

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

  class App extends React.Component {
    state = {
      placements: [
        'up',
        'down',
        'left',
        'right',
        'up-left',
        'up-right',
        'down-left',
        'down-right'
      ]
    };

    render() {
      const { placements } = this.state;
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-tip">
          {placements.map((item) => {
            return (
              <ReactTip key={item} title={`abc.com - ${item}`} placement={item}>
                <button className="button is-fullwidth is-info">Abc.com - {item}</button>
              </ReactTip>
            );
          })}
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-tip
[download-url]: https://www.npmjs.com/package/@jswork/react-tip
npm package: @jswork/react-toggle
Description: Toggle component for react.
Latest version: 1.0.3

# react-toggle
> Toggle 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-toggle
```

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

  ```

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

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-toggle
[download-url]: https://www.npmjs.com/package/@jswork/react-toggle
npm package: @jswork/react-tree
Description: React tree.
Latest version: 1.0.5

# react-tree
> React tree.

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

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

  ```

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

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-tree
[download-url]: https://www.npmjs.com/package/@jswork/react-tree
npm package: @jswork/react-upload-weibo-media
Description: React upload media.
Author: afei
Latest version: 1.0.1

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

[![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-upload-weibo-media
```

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


## usage
1. import css
  ```scss
  @import "~@jswork/react-figure/dist/style.scss";
  @import "~@jswork/wsui-frame-wrapper/dist/index.scss";
  @import "~@jswork/react-upload-weibo-media/dist/style.scss";

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

  class App extends React.Component {
    state = {
      token:
        'SUB=_2A25NRDndDeRhGeVI7VMZ8yzEyz-IHXVuMCwVrDV_PUNbm9AfLVX9kW9NTBpP0WiKCSBlMw7oSMG7Zy0nrMofP6ea',
      value: ''
    };

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

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-upload-weibo-media">
          <ReactUploadWeiboMedia
            onChange={this._onChange}
            value={this.state.value}
            token={this.state.token}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-upload-weibo-media/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-upload-weibo-media
[download-url]: https://www.npmjs.com/package/@jswork/react-upload-weibo-media
npm package: @jswork/react-video
Description: React video wrapper.
Author: afei
Latest version: 1.0.0

# react-video
> React video 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-video
```

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


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

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

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

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

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-video
[download-url]: https://www.npmjs.com/package/@jswork/react-video
npm package: @jswork/read-pkg-json
Description: Read package.json file.
Latest version: 1.0.3

# read-pkg-json
> Read package.json file.

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

## installation
```shell
npm install @jswork/read-pkg-json
```

## usage
```js
import readPkgJson from '@jswork/read-pkg-json';

// 1. current dir
const pkg = readPkgJson();
// 2. specify dir
const pkg = readPkgJson('path/to/your/project');
```

## types
```ts
/// <reference types="@jswork/read-pkg-json/global.d.ts" />
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/read-pkg-json
[download-url]: https://www.npmjs.com/package/@jswork/read-pkg-json
npm package: @jswork/reduce-fns
Description: Generate the reduceable function.
Latest version: 1.0.1

# reduce-fns
> Generate the reduceable function.

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

## installation
```shell
npm install @jswork/reduce-fns
```

## usage
```js
import reduceFns from '@jswork/reduce-fns';

const sum = (a, b) => a + b;
const mul = (a, b) => a * b;
const sumAll = reduceFns(
  () => 0,
  (args) => args[0],
  sum
);
const mulAll = reduceFns(
  () => 1,
  (args) => args[0],
  mul
);

console.log(sumAll(1, 2, 3))          // 6
console.log(mulAll(1, 2, 3, 4, 5))    // 120
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/reduce-fns
[download-url]: https://www.npmjs.com/package/@jswork/reduce-fns
npm package: @jswork/render-null-decorator
Description: Render null for react.
Author: afei
Latest version: 1.0.0

# render-null-decorator
> Render null for react.

## installation
```shell
npm i -S @jswork/render-null-decorator
```

## descriptions

~~~
thanks to:
https://github.com/mbasso/react-decoration/blob/master/src/decorators/components/renderNothing.js
~~~
npm package: @jswork/reorder-list
Description: Reorder items by ids.
Latest version: 1.0.1

# reorder-list
> Reorder items by ids.

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

## installation
```shell
npm install @jswork/reorder-list
```

## usage
```js
import reorderList from '@jswork/reorder-list';

const steps = [
  { id: 301, title: '安装包', step: 1 },
  { id: 302, title: '添加 jsw-presets 工具', step: 2 },
  { id: 303, title: '更新 astrojs', step: 3 },
  { id: 304, title: '添加 image-zoom 插件', step: 4 },
  { id: 305, title: '处理一个报错', step: 5 }
];

const ids = [305, 302, 301, 303, 304]; // by id
const indexes = [4, 1, 0, 2, 3]; // by index

const result1 = reorderList(steps, ids, { field: 'id' });
const result2 = reorderList(steps, indexes);
console.log(result1);
console.log(result2);

/*
  const result = [
    { id: 305, title: '处理一个报错', step: 5 },
    { id: 302, title: '添加 jsw-presets 工具', step: 2 },
    { id: 301, title: '安装包', step: 1 },
    { id: 303, title: '更新 astrojs', step: 3 },
    { id: 304, title: '添加 image-zoom 插件', step: 4 },
  ]
*/
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/reorder-list
[download-url]: https://www.npmjs.com/package/@jswork/reorder-list
npm package: @jswork/replace-host
Description: Replace host to the other.
Latest version: 1.0.1

# replace-host
> Replace host to the other.

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

## installation
```shell
npm install @jswork/replace-host
```

## usage
```js
import replaceHost from '@jswork/replace-host';

const url1 = 'https://aot-report-h5.dev.com/offline_asc_mobile?task_id=16807';
const url2 = 'https://sandbox-aot-report-h5.dev.com';

replaceHost(url1, url2);
// https://sandbox-aot-report-h5.dev.com/offline_asc_mobile?task_id=16807
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/replace-host
[download-url]: https://www.npmjs.com/package/@jswork/replace-host
npm package: @jswork/report-cli
Description: Report helper.
Author: aric.zheng
Latest version: 1.0.0

# report-cli
> Report helper.

## installation
```shell
git clone git@github.com:alo7i/report-cli.git
# git clone https://github.com/alo7i/report-cli.git
cd report-cli && npm link
```

## usage
```shell
# 当前月份/.tmp.md 文件
report-cli g
# 指定日期
report-cli g -d=2022-05-25
# 下个月的日期
report-cli g test.md -d=2022-04-25
```
npm package: @jswork/root-domain
Description: Extract root domain name from an URL.
Latest version: 1.0.0

# root-domain
> Extract root domain name from an URL.

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

## installation
```shell
npm install @jswork/root-domain
```

## usage
```js
import rd from '@jswork/root-domain';

rd('www.baidu.com');                      // baidu.com
rd('https://api.js.work:8080/v1/user');   // js.work
rd('http://localhost');                   // localhost
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/root-domain
[download-url]: https://www.npmjs.com/package/@jswork/root-domain
npm package: @jswork/routerx
Description: Generate routes for react-router.
Latest version: 1.0.5

# i18n-helper
> I18n helper.

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

## installation
```shell
npm install @jswork/i18n-helper
```

## usage
```js
import i18nHelper from '@jswork/i18n-helper';

// usage goes here.
```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/i18n-helper
[download-url]: https://www.npmjs.com/package/@jswork/i18n-helper
npm package: @jswork/routerx-cli
Description: Generate .routerrc file for react router.
Author: afei
Latest version: 1.0.2

# routerx-cli
> Generate .routerrc file for react router.

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

![snapshot](https://tva1.sinaimg.cn/large/0081Kckwgy1gk87ynhkbaj30u60asasp.jpg)

## installation
```shell
# public
npm i -g @jswork/routerx-cli

# private
git clone https://github.com/afeiship/routerx-cli.git
cd routerx-cli
npm i && npm link
```

## usage
~~~
Usage: routerx-cli [options]

Options:
  -V, --version       output the version number
  -d, --debug         only show cmds, but not clean.
  -s, --src <string>  source filepath. (default: "./src")
  -h, --help          display help for command
~~~

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/routerx-cli
[download-url]: https://www.npmjs.com/package/@jswork/routerx-cli
npm package: @jswork/rtk-config-store
Description: Redux toolkit config store with next.
Latest version: 1.1.1

# rtk-config-store
> Redux toolkit config store with next.

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

## installation
```shell
npm install @jswork/rtk-config-store
```

## usage
> store.ts
```ts
import { scanWebpack } from '@jswork/scan-modules';
import RtkConfigStore from '@jswork/rtk-config-store';

// when webpack
const context = require.context('./modules', true, /\.ts$/);
const modules = scanWebpack(context, { modules: '/modules/' });
export const store = RtkConfigStore({ modules, preloadedState: {}, reducer: {} });

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;
```

> app.ts
```ts
import { Provider } from 'react-redux';
import { store } from '@/shared/stores/root';

interface IReduxProviderProps extends React.PropsWithChildren {}

export default function (props: IReduxProviderProps) {
  const { children } = props;
  return <Provider store={store}>{children}</Provider>;
}
```

> define a slice use `nx.$createSlice`
```ts
export default nx.$createSlice({
  name: 'user',
  initialState: {
    token: null,
    profile: JSON.parse(localStorage.getItem('profile'))
  },
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setProfile: (state, action) => {
      state.profile = action.payload;
    }
  },
  watch: {
    profile: (newValue, oldValue, objectPath) => {
      console.log('profile:', newVal, oldVal, objectPath);
    }
  }
});
```

## types
```ts
/// <reference types="@jswork/rtk-config-store/global.d.ts" />
```

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

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

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

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

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