open-index/open-npm huggingface dataset:
npm package: @jswork/react-full-image
Description: Full page background image for react.
Author: afei
Latest version: 1.0.6

# react-full-image
> Full page background 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-full-image
```

## properties
[object Promise]

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

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

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

  import '@jswork/next-sample';

  const images = [
    'bg-2.jpg',
    'bg.jpg',
    'welcome_bg.2233ee0f.png',
    'yuanhua1.jpg',
    'alo7.png'
  ];

  class App extends React.Component {
    render() {
      const item = nx.sample(images);
      console.log(item);
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-full-image">
          <ReactFullImage
            animation="blur"
            src={require(`./assets/${item}`).default}
            style={{ backgroundColor: '#eef4fa' }}
          />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-full-image
[download-url]: https://www.npmjs.com/package/@jswork/react-full-image
npm package: @jswork/react-full-video
Description: Full page background video for react.
Latest version: 1.0.1

# react-full-video
> Full page background video 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-full-video
```

## videos
- https://lofter.lf127.net/1611802866186/JWmeidangyeshenrenjingtayufangjiankuishixingchen.mp4
- https://lofter.lf127.net/1611821341381/jwhaideyanjing~1.mp4

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

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

  // customize your styles:
  $react-full-video-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactFullVideo from '@jswork/react-full-video';
  import '../../src/components/style.scss';
  import styled from 'styled-components';

  const Container = styled.div`
    padding: 0;
    margin: 0;
    height: 100%;
    .card {
      position: absolute;
      width: 400px;
      height: 220px;
      background: #fff;
      padding: 20px;
      box-shadow: rgb(0 0 0 / 16%) 0px 3px 10px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  `;

  export default (props: any) => {
    return (
      <Container>
        <ReactFullVideo />
        <div className="card">A nice login ui.</div>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-full-video/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-full-video
[download-url]: https://www.npmjs.com/package/@jswork/react-full-video
npm package: @jswork/react-gh2project
Description: React github pages to project.
Author: afei
Latest version: 1.0.0

# react-gh2project
> React github pages to project.

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

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

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


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

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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-gh2project">
          <ReactGh2project />
          <ReactGh2project disabled style={{ top: '40%' }} />
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

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

# react-github-corner
> Github corner 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-github-corner
```

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


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

  // customize your styles:
  $react-github-corner-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactGithubCorner from '@jswork/react-github-corner';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactGithubCorner value="https://github.com/afeiship" />
        </div>
      );
    }
  }

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

  ```

## documentation
- https://afeiship.github.io/react-github-corner/
- https://upmostly.github.io/modali/


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-github-corner
[download-url]: https://www.npmjs.com/package/@jswork/react-github-corner
npm package: @jswork/react-highlight
Description: A simple React wrapper around the Highlight.js library.
Latest version: 1.0.1

# react-highlight
> A simple React wrapper around the Highlight.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-highlight
```

## 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-highlight/blob/master/LICENSE.txt).

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-highlight
[download-url]: https://www.npmjs.com/package/@jswork/react-highlight
npm package: @jswork/react-hmr-decorator
Description: React hot module reload decorator.
Author: afei
Latest version: 1.0.0

# react-hmr-decorator
> React hot module reload decorator

## installation
```bash
npm install @jswork/react-hmr-decorator
```

## usage
1. index.js
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

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

2. app.js
```js
import React from 'react';
import hotable from 'react-hmr-decorator';

@hotable(module)
export default class extends React.Component{
  render(){
    return (
      <div>
        Hello world _42323!
        <input />
      </div>
    )
  }
}
```

3. babelrc
```json
{
  "presets":[
    "env",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-decorators-legacy"
  ]
}
```

4. package.json scripts:
```json
"scripts": {
  "dev": "webpack-dev-server --hot"
},
```

## resources
- https://github.com/gaearon/react-hot-loader
- https://github.com/afeiship/webpack-notes
- https://larrylu.blog/react-decorator-hoc-2536db2737cb
npm package: @jswork/react-html
Description: A raw html container for react.
Author: afei
Latest version: 1.0.0

# react-html
> A raw html 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-html
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| nodeName  | string | false    | 'div'   | The node name(default is `div`).      |


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

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

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

  class App extends React.Component {
    state = {
      html1: '<p><strong>strong text</strong></p>',
      html2: '<strong>strong text</strong><span>inline text</span>',
      html3: '<strong>strong text</strong><em>inline em text</em>'
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-html">
          <ReactHtml>{this.state.html1}</ReactHtml>
          <ReactHtml nodeName="blockquote">{this.state.html2}</ReactHtml>
          <ReactHtml nodeName="p">{this.state.html3}</ReactHtml>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-html
[download-url]: https://www.npmjs.com/package/@jswork/react-html
npm package: @jswork/react-iframe-mate
Description: React iframe mate component.
Latest version: 1.2.3

# react-iframe-mate
> React iframe mate component.

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

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

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

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

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

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

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

  ```

## preview
- https://afeiship.github.io/react-iframe-mate/

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

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

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

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

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

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

## properties
| Name      | Type   | Required | Default | Description                                                    |
| --------- | ------ | -------- | ------- | -------------------------------------------------------------- |
| className | string | false    | -       | The extended className for component.                          |
| objectFit | enum   | false    | 'cover' | How an <img> or <video> should be resized to fit its container |


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

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

  class App extends React.Component {
    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-image">
          <p>
            <ReactImage
              style={{ width: 400, height: 200 }}
              src="https://tva1.sinaimg.cn/large/006tNbRwly1gapa83qtc2j31670u0wsl.jpg"
            />
          </p>
          <p>
            <ReactImage
              objectFit="contain"
              style={{ width: 400, height: 200 }}
              src="https://tva1.sinaimg.cn/large/006tNbRwly1gapa83qtc2j31670u0wsl.jpg"
            />
          </p>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-image
[download-url]: https://www.npmjs.com/package/@jswork/react-image
npm package: @jswork/react-image-icon
Description: Image icon for react.
Latest version: 1.0.7

# react-image-icon
> Image 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-image-icon
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| disabled  | bool   | false    | -       | If show disabled.                     |
| value     | any    | false    | -       | The icon image src.                   |
| size      | union  | false    | 40      | Image icon width/height.              |


## 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 ReactImageIcon from '@jswork/react-image-icon';
  import styled from 'styled-components';
  import '../../src/components/style.scss';

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

  export default (props: any) => {
    return (
      <Container>
        <ReactImageIcon
          size={32}
          value="https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg"
        />
        <ReactImageIcon
          value={{
            normal: 'https://mat1.gtimg.com/v/comment/images/avatar_default.9d95c455.jpg',
            hover: 'https://tva1.sinaimg.cn/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg'
          }}
        />
      </Container>
    );
  };

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-image-icon
[download-url]: https://www.npmjs.com/package/@jswork/react-image-icon
npm package: @jswork/react-inline-edit
Description: Inline editing for react.
Latest version: 1.0.5

# react-inline-edit
> Inline editing 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-inline-edit
```

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

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

  // customize your styles:
  $react-inline-edit-options: ()
  ```
2. import js
  ```js
  import React, { useState, useEffect } from 'react';
  import ReactInlineEdit from '@jswork/react-inline-edit';
  import styled from 'styled-components';
  import '../../src/components/style.scss';

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

  export default () => {
    const [value, setValue] = useState('Hello inline edit');

    useEffect(() => {
      console.log('value changed:', value);
    }, [value]);

    return (
      <Container>
        <ReactInlineEdit value={value} onChange={(e) => setValue(e.target.value)} />
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-inline-edit/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-inline-edit
[download-url]: https://www.npmjs.com/package/@jswork/react-inline-edit
npm package: @jswork/react-input
Description: React input.
Latest version: 1.0.2

# react-input
> React input.

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

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

  ```

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-input
[download-url]: https://www.npmjs.com/package/@jswork/react-input
npm package: @jswork/react-kbar
Description: React kbar wrapper.
Latest version: 1.0.3

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

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

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

  body {
    font-family: Arial, Helvetica, sans-serif;
  }

  // customize your styles:
  $react-kbar-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactKbar from '../../src/main';
  import { createGlobalStyle } from 'styled-components';
  // import styled from 'styled-components';
  const GlobalStyleComp = createGlobalStyle`
    body{
      font-family: Arial, Helvetica, sans-serif;
    }
  `;

  const actions = [
    {
      id: 'blog',
      name: 'Blog',
      shortcut: ['b'],
      keywords: 'writing words',
      perform: () => (window.location.pathname = 'blog')
    },
    {
      id: 'contact',
      name: 'Contact',
      shortcut: ['c'],
      keywords: 'email',
      perform: () => (window.location.pathname = 'contact')
    }
  ];

  export default () => {
    return (
      <>
        <ReactKbar actions={actions}>
          <button>Cmd + K active ME 🦄</button>
        </ReactKbar>
        <GlobalStyleComp />
      </>
    );
  };

  ```

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

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

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

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

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

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

# react-loading
> Spinner component for react.

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

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

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


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

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

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

    componentDidMount() {
      Controller.singleton(ReactLoading, {
        // children: 'loading',
        backdrop: {
          transparent: true,
          onClick: () => {
            ReactLoading.dismiss(() => {
              console.log('after dismiss');
            });
          }
        }
      });
    }

    render() {
      return (
        <div className="app-container">
          <button
            className="button"
            onClick={(e) => {
              ReactLoading.present(
                () => {
                  console.log('after present');
                },
                { children: `[ ${Math.random().toString(36).slice(-6)} ]` }
              );
            }}>
            Show Dynamic Loading.
          </button>
        </div>
      );
    }
  }

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-markdown-props
[download-url]: https://www.npmjs.com/package/@jswork/react-markdown-props
npm package: @jswork/react-mobxer
Description: React mobx manager.
Latest version: 1.0.17

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

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

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

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

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

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

  ```

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

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-mobxer
[download-url]: https://www.npmjs.com/package/@jswork/react-mobxer
npm package: @jswork/react-modal-manager
Description: A cool modal manager for react.
Latest version: 1.2.15

# react-modal-manager
> A cool modal manager 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-modal-manager
```

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

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

  // customize your styles:
  $react-modal-manager-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactModalManager from '@jswork/react-modal-manager';
  import styled from 'styled-components';
  import viteRequireContext from '@jswork/vite-require-context';
  import '@jswork/next';

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

  const moduleFiles = import.meta.globEager('./modals/*.jsx');
  const context = viteRequireContext(moduleFiles);

  export default () => {
    return (
      <Container>
        <ReactModalManager
          context={context}
          inject={(e) => {
            nx.$modal = e;
          }}>
          <button
            onClick={() => {
              nx.$modal.present('modal1');
            }}>
            MyModal
          </button>
        </ReactModalManager>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-modal-manager/

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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-modal-manager
[download-url]: https://www.npmjs.com/package/@jswork/react-modal-manager
npm package: @jswork/react-panel
Description: React panel component.
Author: afei
Latest version: 1.0.0

# react-panel
> React panel component.

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

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

## properties
| Name      | Type    | Required | Default | Description                           |
| --------- | ------- | -------- | ------- | ------------------------------------- |
| className | string  | false    | -       | The extended className for component. |
| header    | element | false    | -       | The header component.                 |


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

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

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

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

          <ReactPanel
            className="mb-5"
            header={
              <h1>
                <span>
                  我是<strong>定制化</strong>的标题
                </span>
              </h1>
            }>
            <p>天下皆知美之为美，斯恶已，皆知善之为善，斯不善已。</p>
            <p>故有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随。</p>
            <p>是以圣人处无为之事，行不言之教，万物作焉而不辞，生而不有，为而不恃，功成而弗居。</p>
            <p>夫惟弗居，是以不去。</p>
          </ReactPanel>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-panel
[download-url]: https://www.npmjs.com/package/@jswork/react-panel
npm package: @jswork/react-placeholder-image
Description: A placeholder image component.
Latest version: 1.0.2

# react-placeholder-image
> A placeholder image component.

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

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

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

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

  // customize your styles:
  $react-placeholder-image-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import PImg from '../../src/main';
  import styled from 'styled-components';

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

    img {
      margin: 20px auto;
      vertical-align: middle;
      display: block;
    }
  `;

  export default () => {
    return (
      <Container>
        <PImg size={100} text='aric' color='FF0000' bg='000000' />
        <PImg size={200} text='Hello World' />
        <PImg width={300} height={100} text='Hello World' color='#ff0000' />
        <PImg text size={200} />
        <div style={{ width: 300, height: 100, margin: '10px auto' }}>
          <PImg text='Hello World' width={300} height={100} devicePixelRatio={2} fullWidth fullHeight />
        </div>
      </Container>
    );
  };

  ```

## preview
- https://afeiship.github.io/react-placeholder-image/

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

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

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

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

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

# react-progress
> Progress 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-progress
```

## properties
| Name      | Type   | Required | Default   | Description                           |
| --------- | ------ | -------- | --------- | ------------------------------------- |
| className | string | false    | -         | The extended className for component. |
| color     | string | false    | '#419bf9' | The highlight body color.             |
| value     | number | false    | 0         | The progress value.                   |
| max       | number | false    | 100       | The max limit value.                  |


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

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

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

  class App extends React.Component {
    get items() {
      return Array.from(Array(10).keys());
    }

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-progress">
          <article className="message is-info">
            <div className="message-header">Preview:</div>
            <div className="message-body">
              <h3 className="mb-3">
                <center className="button is-primary">Progress bar</center>
              </h3>
              {this.items.map((item) => {
                return (
                  <ReactProgress
                    className="mb-2"
                    key={item}
                    value={item * 10 + 10}
                  />
                );
              })}
            </div>
          </article>
        </ReactDemokit>
      );
    }
  }

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

  ```

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


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

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

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

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

[download-image]: https://img.shields.io/npm/dm/@jswork/react-progress
[download-url]: https://www.npmjs.com/package/@jswork/react-progress
npm package: @jswork/react-pwa-promotion
Description: A vite pwa promotion component for workbox.
Latest version: 1.0.15

# react-pwa-promotion
> A vite pwa promotion component for workbox.

## installation
```shell
yarn add @jswork/react-pwa-promotion
```

## types
```ts
/// <reference types="@jswork/react-pwa-promotion/global.d.ts" />
```
npm package: @jswork/react-query-shortcut
Description: A lightweight wrapper for TanStack Query that simplifies API integration with a unified interface.
Latest version: 1.0.2

# react-query-shortcut
> A lightweight wrapper for TanStack Query that simplifies API integration with a unified interface.

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

## Installation
```bash
yarn add @jswork/react-query-shortcut
```

## Features
- 🚀 Simplified API integration with TanStack Query
- 🎯 String-based query keys for easier management
- 🔄 Unified interface for queries and mutations
- 🛠 Built-in utilities for data management

## Basic Setup
```typescript
import { QueryClient } from '@tanstack/react-query';

// Initialize your API endpoints
nx.$api = {
  'users/list': () => fetch('/api/users').then(res => res.json()),
  'users/create': (data) => fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data)
  }).then(res => res.json())
};

// Set up QueryClient
const queryClient = new QueryClient();
nx.$client = queryClient;
```

## Usage

**useQuery**

Simplified query hook for fetching data:

```typescript
const { data, isLoading } = nx.useQuery('users/list');

// Using object config
const { data, isLoading } = nx.useQuery({
  queryKey: ['custom-key'],
  queryFn: () => fetchCustomData()
});
```

**useMutation**

Streamlined mutation hook for data updates:

```typescript
const { mutate } = nx.useMutation('users/create');

// Handle user creation
const handleCreate = () => {
  mutate({ name: 'John Doe' });
};

// Using object config
const { mutate } = nx.useMutation({
  mutationFn: (data) => updateCustomData(data)
});
```

**getQueryData**

Retrieve cached query data:

```typescript
// Get data with string key
const userData = nx.getQueryData('users/list');

// Get data with array key
const nestedData = nx.getQueryData(['parent', 'child']);
```

**invalidateQuery**

Invalidate and refetch queries:

```typescript
// Invalidate with string key
await nx.invalidateQuery('users/list');

// Invalidate with array key
await nx.invalidateQuery(['parent', 'child']);
```

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

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

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

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

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