open-index/open-npm huggingface dataset:
npm package: @rcnoverwatcher/react-fade-in-react-18
Description: Super-easy fade-in animation for react children (personal fork)
Author: Graham Kaemmer
Latest version: 2.0.5

# react-fade-in

## Fork of https://github.com/gkaemmer/react-fade-in to support react 18 (old project was likely abandoned)

Dead-simple and opinionated component to fade in an element's children.

![React Fade In](/example/example.gif)

## Installation

`npm install react-fade-in`

## Usage

`react-fade-in`

```
import FadeIn from 'react-fade-in';
// ...
<FadeIn>
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
  <div>Element 6</div>
</FadeIn>
```

## API

### `FadeIn`

Animates its children, one by one.

> **Note**: To have children animate separately, they must be first-level children of the `<FadeIn>` component (i.e. members of its `props.children`).

#### Props

- `delay`: Default: 50. Delay between each child's animation in milliseconds.
- `transitionDuration`: Default: 400. Duration of each child's animation in milliseconds.
- `className`: No default. Adds a `className` prop to the container div.
- `childClassName`: No default. Adds a `className` prop to each child div, allowing you to style the direct children of the `FadeIn` component.
- `wrapperTag`: Default: `"div"`. Override the HTML element of the wrapping div.
- `childTag`: Default: `"div"`. Override the HTML element wrapped around each child element.
- `visible`: **New in 2.0.0**: If not `undefined`, the `visible` prop can be used to control when the fade in occurs. If set to `false` after the fade-in animation completes, the children will fade out one by one.
- `onComplete`: **New in 2.0.0**: specifies a callback to be called when the animation completes.

Happy fading.
npm package: @rcnp-tickets/common
Description: yarn add @rcnp-tickets/common ## Increase patch number to npm package yarn version --patch
Author: Renzo Navarro
Latest version: 1.0.14

Library of Error definitions, middlewares, and different type of handlers used by the microservices that compound the ticketing solution. 
## Install package
yarn add @rcnp-tickets/common
## Increase patch number to npm package
yarn version --patch

## Publish npm package first time
yarn publish

## Script to add+commit changes to git and publish them as part of a new patch
yarn commit <commit message>
yarn pub
* These two commands work in sequence. They should not be used separately or in the opposite order.

## Update version of dependency library being used in your project
yarn update <package-name> (updates only the yarn.lock file)
yarn install <package-name>@latest (updates the version showed in package.json file)

## go inside shell of a specific POD

### Find out first the POD name
kubectl get pods
### Then use it in this command
kubectl exec -it <pod-name> sh
npm package: @rcode-link/tiptap-comments
Description: Extension for tiptap editor
Author: Radan Stupar
Latest version: 1.0.2

# TipTap comments extension

Extension is written in typescript

Comments are saved in extensions storage. When comment is added, thread is created and all comments
regarding that thread are inserted there.
Structure

```json
[
  {
    "threadId": "uuid",
    "comments": [
      {
        "comment": "text",
        "uuid": "uuid",
        "date": "date-time",
        "user": {},
        "parent_id": "nullable",
        "parent_text": "nullable"
      }
    ]
  }
]
```

### Usage

```js
import customComment from "@rcode-link/tiptap-comments";

const editor = Editor({
    extensions: [
        StarterKit,
        customComment
    ]
})
```

### Define User who is posting:

The user object can be whatever is passed to it

```js
import customComment from "@rcode-link/tiptap-comments";

const editor = Editor({
    extensions: [
        StarterKit,
        customComment.configure({
            user: {
                firstName: user.firstName,
                lastName: user.lastName,
                id: user.id
            }
        })
    ]
})


```

### Add comment and Reply

Comment:

```js
editor.commands.addComments({
    comment: commentTest
})
```

Reply:

```js
editor.commands.addComments({
    comment: commentTest,
    parent_id: id_OF_parent
})
```

### Remove comment

```js
editor.commands.removeSpecificComment(threadId, commentUuid);
```

### Getting list of comments

```js
editor.storage.comment.comments
```

**Note:**
Since comments are saved in extension storage, it is necessary when saving data to grab them, and on load to add them
back

Adding comments when loaded:

```js
editor.commands.setContent(content, true);
editor.storage.comment.comments = comments;
```
Getting comments to be saved: 
```js
editor.storage.comment
```
TODO:

* update comment


# License

The MIT License (MIT). Please see [License File](https://github.com/radans/tiptap-comments/blob/main/Licence.md) for more information.
npm package: @rcode-link/tiptap-drawio
Description: Extension of tiptap image extension. Used to for drawio plugin.
Author: Radan Stupar
Latest version: 1.0.21

# DrawIoExtension

[Live example](https://radans.github.io/tiptap-drawio-extension/)

https://github.com/radans/tiptap-drawio-extension/assets/7635076/e757bcda-befe-43eb-a342-fe77acf99978

## Usage

### Installation

```bash
npm install @rcode-link/tiptap-drawio
```

### Include in editor

```js
import drawIoExtension from '@rcode-link/tiptap-drawio';

const editor = Editor({
    extensions: [
        drawIoExtension.configure({
            openDialog: 'dblclick'
        })
    ]
})
```

### Configuration

since its extension on extension image you can use whatever things you would like with this extension.
base configuration:

```json
{
  "drawIoLink": "https://embed.diagrams.net/?embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json",
  "baseImage": "base64/png",
  "openDialog": "click"
}
```

#### drawIoLink

in case that you have self hosted or want to use some different instance of drawio this is
place where it can be chagned.

### baseImage

when image is inserted is hows base image with start square.

![](images/baseImageExample.png)

if you want to use some different image just pass base64 png to this property

### openDialog
defines when dialog will be opened default click.
options: 
 - click
 - dblclick

## Inserting drawio image
```js
editor.commands.insertDrawIo()
```

# License
MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @rcompat/args
Description: Standard library program arguments
Latest version: 0.12.0
Deprecated: Use @rcompat/runtime.args

# @rcompat/args

Runtime-agnostic access to command-line arguments.

## What is @rcompat/args?

A cross-runtime module that provides consistent access to program arguments
across Node, Deno, and Bun. Write your CLI tools once and run them on any
JavaScript runtime.

## Installation

```bash
npm install @rcompat/args
```

## Usage

```js
import args from "@rcompat/args";

// args is a string[] containing your program arguments
console.log(args);
```

Running `node app.js foo bar --verbose` will output

```
[ 'foo', 'bar', '--verbose' ]
```

### Example: Simple CLI

```js
import args from "@rcompat/args";

const [command, ...rest] = args;

switch (command) {
    case "greet":
        console.log(`Hello, ${rest[0] ?? "world"}!`);
        break;

    case "help":
        console.log(
            `Usage:
  app.js <command> [args]

Commands:
  greet [name]   Greet the specified name (or 'world')
  help           Show this help message`
        );
        break;

    default:
        console.log("Usage: app.js <command> [args]");
}
```

```bash
node app.js greet Bob # Hello, Bob!
bun app.js greet      # Hello, world!
```

## How It Works

Different runtimes expose command-line arguments differently:

| Runtime | Source         | Includes runtime/script? |
| ------- | -------------- | ------------------------ |
| Node    | `process.argv` | Yes (first two elements) |
| Bun     | `Bun.argv`     | Yes (first two elements) |
| Deno    | `Deno.args`    | No                       |

`@rcompat/args` normalizes this by always returning only your program's
arguments — the runtime executable and script path are stripped away.

The package uses [runtime keys](https://runtime-keys.proposal.wintercg.org) to
select the appropriate implementation at import time, with zero runtime
overhead.

## Cross-Runtime Compatibility

| Runtime | Supported |
| ------- | --------- |
| Node.js | ✓         |
| Deno    | ✓         |
| Bun     | ✓         |

No configuration required — just import and use.

## License

MIT

## Contributing

See [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.
npm package: @rcompat/crypto
Description: Standard library cryptographic functions
Latest version: 0.18.0

# @rcompat/crypto

Cryptographic functions for JavaScript runtimes.

## What is @rcompat/rypto?

A cross-runtime module providing cryptographic utilities including hashing and
access to the Web Crypto API. Works consistently across Node, Deno, and Bun,
using native implementations where available.

## Installation

```bash
npm install @rcompat/crypto
```

```bash
pnpm add @rcompat/crypto
```

```bash
yarn add @rcompat/crypto
```

```bash
bun add @rcompat/crypto
```

## Usage

### hash

Generate a short hash from data. Useful for cache busting, fingerprinting, or
generating unique identifiers.

```js
import hash from "@rcompat/crypto/hash";

// Hash a string
const h1 = await hash("hello world");
console.log(h1);  // "b94d27b9934d3e08a52n"

// Hash with different algorithm
const h2 = await hash("hello world", "SHA-512");

// Hash binary data
const buffer = new TextEncoder().encode("hello world");
const h3 = await hash(buffer);

// Hash an ArrayBuffer
const arrayBuffer = new ArrayBuffer(16);
const h4 = await hash(arrayBuffer);
```

The hash function returns a 21-character string: 20 hex characters followed by
"n" (for "numeric hash").

## API Reference

### `hash(data, algorithm?)`

```ts
import type { TypedArray } from "@rcompat/type";
type Algorithm = "SHA-256" | "SHA-384" | "SHA-512";

declare function hash(
  data: string | ArrayBuffer | TypedArray,
  algorithm?: Algorithm
): Promise<string>;
```

Generates a short hash from the input data.

| Parameter   | Type                                  | Default      | Description           |
|-------------|---------------------------------------|--------------|-----------------------|
| `data`      | `string \| ArrayBuffer \| TypedArray` | —            | Data to hash          |
| `algorithm` | `string`                              | `"SHA-256"`  | Hash algorithm        |

**Returns**: A promise that resolves to a 21-character hash string.

Supported algorithms:
- `"SHA-256"` (default)
- `"SHA-384"`
- `"SHA-512"`

## Examples

### Cache busting for assets

```js
import hash from "@rcompat/crypto/hash";

async function getAssetUrl(content) {
  const fingerprint = await hash(content);
  return `/assets/bundle.${fingerprint}.js`;
}

const url = await getAssetUrl(bundleContents);
// "/assets/bundle.b94d27b9934d3e08a52n.js"
```

### Content-based deduplication

```js
import hash from "@rcompat/crypto/hash";

const seen = new Set();

async function processUnique(content) {
  const contentHash = await hash(content);

  if (seen.has(contentHash)) {
    return null;  // Already processed
  }

  seen.add(contentHash);
  return process(content);
}
```

## Cross-Runtime Compatibility

| Runtime | Supported |
|---------|-----------|
| Node.js | ✓         |
| Deno    | ✓         |
| Bun     | ✓         |

No configuration required — just import and use.

## License

MIT

## Contributing

See [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.
npm package: @rcompat/env
Description: Standard library environment variables
Latest version: 0.19.0

# @rcompat/env

Environment variable loading for JavaScript runtimes.

## Installation

```bash
npm install @rcompat/env
```

```bash
pnpm add @rcompat/env
```

```bash
yarn add @rcompat/env
```

```bash
bun add @rcompat/env
```

## Usage

### Required variables

Use `env.get` when a variable must exist. Throws immediately if missing,
so misconfigured environments fail early and explicitly:

```js
import env from "@rcompat/env";

const url = env.get("DATABASE_URL");   // string, throws if missing
const secret = env.get("API_SECRET");  // string, throws if missing
```

### Optional variables

Use `env.try` when a variable may or may not be present:

```js
import env from "@rcompat/env";

const debug = env.try("DEBUG");        // string | undefined
const nodeEnv = env.try("NODE_ENV");   // string | undefined
```

## API Reference

### `env.get(key)`

```ts
env.get(key: string): string;
```

Returns the value of the environment variable. Throws if the variable is
not set.

| Parameter | Type     | Description                  |
| --------- | -------- | ---------------------------- |
| `key`     | `string` | Environment variable name    |

### `env.try(key)`

```ts
env.try(key: string): string | undefined;
```

Returns the value of the environment variable, or `undefined` if not set.
Never throws.

| Parameter | Type     | Description                  |
| --------- | -------- | ---------------------------- |
| `key`     | `string` | Environment variable name    |

## File loading

The package looks for the first matching file in your project root:

1. `.env.{NODE_ENV}.local`
2. `.env.{NODE_ENV}`
3. `.env.local`
4. `.env`

If `NODE_ENV` is not set, `JS_ENV` is used as a fallback. Local files (`.local`
suffix) are typically gitignored and used for machine-specific secrets.

## Merging

`process.env` is always the base. The first `.env` file found is layered on top,
so file variables win over system variables.

## Substitution

Variables can reference other variables:

```
FOO=world
BAR=hello$FOO           # helloworld
BAZ=hello${FOO}         # helloworld
ESCAPED=hello\$FOO      # hello$FOO
WITH_DEFAULT=${FOO:-fallback}  # uses fallback if FOO is undefined
```

Substitution resolves against the merged environment, so `process.env` variables
are available too:

```
CONFIG=$HOME/.config/myapp
DB_USERNAME=${DB_USERNAME:-myapp}  # uses system DB_USERNAME or falls back to myapp
```

Single-quoted values skip substitution:

```
FOO='hello$BAR'     # hello$BAR (literal)
```

## Project structure

```
my-project/
├── .env                    # Shared defaults
├── .env.development        # Development settings
├── .env.development.local  # Local dev secrets (gitignored)
├── .env.production         # Production settings
└── .gitignore
```

```gitignore
.env.local
.env.*.local
```

## License

MIT

## Contributing

See [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.
npm package: @rcompat/html
Description: Standard library HTML
Latest version: 0.13.0

# @rcompat/html

HTML utilities for JavaScript runtimes.

## What is @rcompat/html?

A cross-runtime module providing HTML handling utilities, including escaping
for XSS prevention. Works consistently across Node, Deno, and Bun.

## Installation

```bash
npm install @rcompat/html
```

```bash
pnpm add @rcompat/html
```

```bash
yarn add @rcompat/html
```

```bash
bun add @rcompat/html
```

## Usage

### escape

Escapes HTML special characters to prevent Cross-Site Scripting (XSS) attacks.
Based on [OWASP recommendations](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#output-encoding-for-html-contexts).

```js
import HTML from "@rcompat/html";

HTML.escape("<script>alert('xss')</script>");
// "&lt;script&gt;alert(&#x27;xss&#x27;)&lt;/script&gt;"

HTML.escape('Hello "world"');
// "Hello &quot;world&quot;"

HTML.escape("Tom & Jerry");
// "Tom &amp; Jerry"
```

### Character escaping

| Character | Escaped    |
|-----------|------------|
| `&`       | `&amp;`    |
| `<`       | `&lt;`     |
| `>`       | `&gt;`     |
| `"`       | `&quot;`   |
| `'`       | `&#x27;`   |

## API Reference

### `escape(input)`

```ts
declare function escape(input: string): string;
```

Escapes HTML special characters in a string.

| Parameter | Type     | Description              |
|-----------|----------|--------------------------|
| `input`   | `string` | The string to escape     |

**Returns**: The escaped string safe for HTML insertion.

## Examples

### Safe HTML templates

```js
import HTML from "@rcompat/html";

function renderUser(user) {
  return `
    <div class="user">
      <h2>${HTML.escape(user.name)}</h2>
      <p>${HTML.escape(user.bio)}</p>
    </div>
  `;
}

renderUser({ name: "<script>bad</script>", bio: "I'm a user" });
// <div class="user">
//   <h2>&lt;script&gt;bad&lt;/script&gt;</h2>
//   <p>I&#x27;m a user</p>
// </div>
```

### Escaping attribute values

```js
import HTML from "@rcompat/html";

const { escape } = HTML;

function createLink(url, text) {
  return `<a href="${escape(url)}" title="${escape(text)}">${escape(text)}</a>`;
}

createLink("/search?q=a&b=c", 'Search "results"');
// <a href="/search?q=a&amp;b=c" title="Search &quot;results&quot;">Search &quot;results&quot;</a>
```

### Form input display

```js
import HTML from "@rcompat/html";

function displayComment(comment) {
  return `<div class="comment">${HTML.escape(comment.text)}</div>`;
}

// Malicious input is safely escaped
displayComment({ text: "<img src=x onerror=alert(1)>" });
// <div class="comment">&lt;img src=x onerror=alert(1)&gt;</div>
```

## Cross-Runtime Compatibility

| Runtime | Supported |
|---------|-----------|
| Node.js | ✓         |
| Deno    | ✓         |
| Bun     | ✓         |

No configuration required — just import and use.

## License

MIT

## Contributing

See [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.
npm package: @rcon-sdk/minecraft
Description: TypeScript SDK for Minecraft RCON with command builders and connection pooling
Author: identities@tuta.com
Latest version: 1.0.1

# @rcon-sdk/minecraft

A TypeScript SDK for controlling Minecraft servers via RCON. Built because I got tired of writing raw command strings and wanted proper autocomplete.

## Why this exists

Minecraft's RCON protocol is straightforward, but building command strings manually is error-prone. This SDK gives you:

- **Type-safe command builders** - Stop guessing parameter order
- **Connection pooling** - For bots and high-traffic tools  
- **Zero dependencies** - Just Node.js built-ins

## Installation

```bash
npm install @rcon-sdk/minecraft
```

## Quick start

```typescript
import { createRCON, commands } from '@rcon-sdk/minecraft';

const client = createRCON({
  host: 'localhost',
  port: 25575,
  password: 'your-rcon-password'
});

await client.connect();

// Execute raw commands
await client.exec('say Hello World');

// Or use the builder
const give = commands.give()
  .player('Notch')
  .item('minecraft:diamond')
  .amount(64);

await client.exec(give.build());
```

## Command builders

Instead of string concatenation:

```typescript
// Bad
await client.exec(`give ${player} ${item} ${amount}`);

// Good
await client.exec(
  commands.give()
    .player(player)
    .item(item)
    .amount(amount)
    .build()
);
```

Available builders: `give`, `time`, `weather`, `gamemode`, `say`, `tellraw`, `title`, `kill`, `teleport`, `effect`, `difficulty`, `spawnpoint`, `setworldspawn`, `scoreboard`, `me`, `msg`, `team`.

Each returns the command string - you still call `client.exec()` to run it.

## Connection pooling

For servers handling many commands:

```typescript
const client = createRCON({
  host: 'localhost',
  port: 25575,
  password: 'password',
  pool: {
    min: 2,
    max: 10
  }
});
```

## Error handling

```typescript
try {
  await client.exec('invalid command');
} catch (err) {
  if (err.code === 'COMMAND_FAILED') {
    // Command rejected by server
  }
}
```

## Requirements

- Node.js 18+
- Minecraft server with RCON enabled (`enable-rcon=true` in server.properties)

## License

MIT
npm package: @rcorp/app.js
Description: Makes web apps closer to desktop apps.
Author: Josuel Rocha
Latest version: 1.0.3

# App.js

Makes web apps closer to desktop apps (web and electron).

It sets the "default" cursor as the default and disables text selection for the entire application.

## Installation

Using npm:
```shell
$ npm i @rcorp/app.js
```

In your project:
```js
import '@rcorp/app.js';
```

## How to use

Add the class to the element to:

#### Enable right clicking on the element
```
allow-right-click
```

#### Disable right clicking on the element
```
disable-right-click
```

#### Enables text selection on the element
```
selectable
```

Inputs of type "text", "password", "email" and TextArea the right click is already activated by default.

## Example

```html
<p class="selectable allow-right-click">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
```
npm package: @rcp/_types
Description: The internal about type definition
Author: imcuttle
Latest version: 2.0.0

# @rcp/\_types

[![NPM version](https://img.shields.io/npm/v/@rcp/_types.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/_types)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/_types.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/_types)

The internal about type definition

## Installation

```bash
npm install @rcp/_types
# or use yarn
yarn add @rcp/_types
```

## Usage

```javascript
import types from '@rcp/_types'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by imcuttle, <mailto:moyuyc95@gmail.com>.

## License

MIT
npm package: @rcp/c.keepalive
Description: Keep react component view / store when switched view.
Author: imcuttle
Latest version: 2.0.0

# @rcp/c.keepalive

[![NPM version](https://img.shields.io/npm/v/@rcp/c.keepalive.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/c.keepalive)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/c.keepalive.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/c.keepalive)

Keep react component view / store when switched view rather than unmount it.

## Installation

```bash
npm install @rcp/c.keepalive
# or use yarn
yarn add @rcp/c.keepalive
```

## Usage

```jsx
import KeepAlive, { bindKeepAliveLifeCycle } from '@rcp/c.keepalive'
import '@rcp/c.keepalive/style.less'

@bindKeepAliveLifeCycle
class Content extends React.Component {
    // 新增的生命周期
    componentWillActive({newValue, oldValue}) {}
    componentDidActive({newValue, oldValue}) {}
    componentWillUnactive({newValue, oldValue}) {}
    componentDidUnactive({newValue, oldValue}) {}
}

<KeepAlive uniqKey="/home" >
    <Content>Home</Content>
<KeepAlive>
// LifeCycle
// componentWillActive => {newValue: '/home'}
// componentDidActive => {newValue: '/home'}

// Components
// <>
//   <Content>Home</Content>
// </>

// Update
<KeepAlive uniqKey="/detail" >
    <Content>Detail</Content>
<KeepAlive>
// LifeCycle
// componentWillUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
// componentWillActive => {newValue: '/detail', oldValue: '/home'} (Detail)
// componentDidUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
// componentDidActive => {newValue: '/detail', oldValue: '/home'} (Detail)

// Components
// <>
//   <Content (display: none)>Home</Content>
//   <Content>Detail</Content>
// </>
```

## Props

### `uniqKey`

- **Type:** `string`

### `disabled`

- **Type:** `boolean`

## Related

## Authors

This library is written and maintained by imcuttle, <a href="mailto:moyuyc95@gmail.com">moyuyc95@gmail.com</a>.

## License

MIT
npm package: @rcp/c.loadingwrapper
Description: A component for easy create loading mask
Author: imcuttle
Latest version: 2.0.0

# @rcp/c.loadingwrapper

[![NPM version](https://img.shields.io/npm/v/@rcp/c.loadingwrapper.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/c.loadingwrapper)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/c.loadingwrapper.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/c.loadingwrapper)

A component for easy create loading mask

## Installation

```bash
npm install @rcp/c.loadingwrapper
# or use yarn
yarn add @rcp/c.loadingwrapper
```

## Usage

```jsx
import LoadingWrapper from '@rcp/c.loadingwrapper'
import '@rcp/c.loadingwrapper/style.less'

<LoadingWrapper isLoading>
    <div>some content</div>
</LoadingWrapper>
```

## Props

### `className`

- **Type:** `string`
- **Default:** `null`

### `isLoading`

- **Type:** `boolean`
- **Default:** `false`

### `renderLoadingDelayMs`

渲染 Loading 延迟毫秒数，为了减少不必要的视觉跳跃

- **Type:** `number`
- **Default:** `1000`

### `withDelayRenderFirstly`

是否首次的时候 Delay 渲染 Loading

- **Type:** `boolean`
- **Default:** `false`

### `LoadingComponent`

自定义 LoadingComponent

- **Type:** `Component|Function|string`
- **Default:** `null`

## Authors

This library is written and maintained by imcuttle, <a href="<mailto:moyuyc95@gmail.com">moyuyc95@gmail.com></a>.

## License

MIT
npm package: @rcp/c.preventfastop
Description: Prevent some fast operation (eg. click)
Author: 余聪
Latest version: 2.0.0

# @rcp/c.preventfastop

[![NPM version](https://img.shields.io/npm/v/@rcp/c.preventfastop.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/c.preventfastop)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/c.preventfastop.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/c.preventfastop)

Prevent some fast operation (eg. click)

## Installation

```bash
npm install @rcp/c.preventfastop
# or use yarn
yarn add @rcp/c.preventfastop
```

## Usage

```jsx
import { PreventFastClick, PreventFastOperation } from '@rcp/c.preventfastop'

const App = () => {
  return (
    <div>
      <PreventFastOperation
        operationName={'onClick'}
        onOperation={async () => {
          await apiSubmit()
        }}
      >
        <Button>提交</Button>
      </PreventFastOperation>
      {/* Same as */}
      <PreventFastClick
        onClick={async () => {
          await apiSubmit()
        }}
      >
        <Button>提交</Button>
      </PreventFastClick>
    </div>
  )
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/c.prompt
Description: Advanced React router prompt support beforeunload
Author: 余聪
Latest version: 2.0.0

# @rcp/c.prompt

[![NPM version](https://img.shields.io/npm/v/@rcp/c.prompt.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/c.prompt)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/c.prompt.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/c.prompt)

Advanced React router prompt support beforeunload

## Installation

```bash
npm install @rcp/c.prompt react-router
# or use yarn
yarn add @rcp/c.prompt react-router
```

## Usage

```javascript
import Prompt, { PromptProvider } from '@rcp/c.prompt'

render(
  <PromptProvider>
    <Prompt when={true} message="Prompt Tips" />
  </PromptProvider>
)

// 自定义 Prompt 弹窗视图
render(
  <PromptProvider
    getPromptComponent={({ message, close }) => <Modal onOk={() => close(true)} onCancel={() => close(false)} />}
  >
    <Prompt when={true} message="Prompt Tips" />
  </PromptProvider>
)
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong06@meituan.com">yucong06@meituan.com</a>.

## License

MIT
npm package: @rcp/hoc.i18n
Description: React Component's high order component about internationalization
Author: imcuttle
Latest version: 2.0.0

# @rcp/hoc.i18n

[![NPM version](https://img.shields.io/npm/v/@rcp/hoc.i18n.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/hoc.i18n)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/hoc.i18n.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/hoc.i18n)

React Component's high order component about internationalization

## Installation

```bash
npm install @rcp/hoc.i18n
# or use yarn
yarn add @rcp/hoc.i18n
```

## Usage

```javascript
import i18n from '@rcp/hoc.i18n'

const currentLang = 'en-us'
@i18n(
  {
    'en-us': {
      hello: 'hello, ${1}'
    },
    'zh-cn': {
      hello: '你好, ${1}'
    }
  },
  currentLang
)
class View extends React.Component {
  render() {
    return <p>{this.i('hello', this.props.title)}</p>
  }
}

// `<View title="Jilly" />`
//    equals to `<p>hello, Jilly</p>`

// `<View title="Jilly" locale={{ hello: 'hello from locale, ${1}' }} />`
//    equals to `<p>hello from locale, Jilly</p>`

// `<View title="Jilly" language="zh-cn" />`
//    equals to `<p>你好, Jilly</p>`
```

### Customize Component's i18n

```javascript
import i18n from '@rcp/hoc.i18n'

const currentLang = 'en-us'
@i18n(
  {
    'en-us': {
      hello: 'hello, ${1}'
    }
  },
  currentLang
)
class View extends React.Component {
  render() {
    return <p>{this.i('hello', this.props.title)}</p>
  }
}

// Customize view's dictionaries
View.i18n // See https://github.com/imcuttle/tiny-i18n/tree/master/packages/tiny-i18n
View.i18n.setLanguage('zh-cn')
View.i18n.setDictionary(
  {
    hello: '你好, ${1}'
  },
  'zh-cn'
)
```

### Preset dictionary by default

```javascript
import i18n from '@rcp/hoc.i18n'

@i18n({
  hello: 'hello, ${1}',
  tip: 'awesome'
})
class View extends React.Component {
  render() {
    return (
      <p>
        {this.i('hello', this.props.title)}
        <span>{this.i('tip')}</span>
      </p>
    )
  }
}

// Customize dictionary from `props.locale`
// `<View title="Jilly" locale={{ hello: 'hello from locale, ${1}' }} />`
//    equals to `<p>hello from locale, Jilly<span>awesome</span></p>`
```

### Preset multiple dictionaries

```javascript
import i18n from '@rcp/hoc.i18n'

@i18n({
  zh: {
    hello: '你好, ${1}',
    tip: '酷'
  },
  en: {
    hello: 'hello, ${1}',
    tip: 'awesome'
  }
})
class View extends React.Component {
  render() {
    return (
      <p>
        {this.i('hello', this.props.title)}
        <span>{this.i('tip')}</span>
      </p>
    )
  }
}

// `<View title="Jilly" language="zh" />`
// => '<p>你好 Jilly<span>酷</span></p>'
```

## Related

- [tiny-i18n](https://github.com/imcuttle/tiny-i18n/tree/master/packages/tiny-i18n) - Tiny yet useful i18n library

## Authors

This library is written and maintained by imcuttle, <mailto:moyuyc95@gmail.com>.

## License

MIT
npm package: @rcp/hoc.mount
Description: The high order component for mounting component
Author: imcuttle
Latest version: 2.0.0

# @rcp/hoc.mount

[![NPM version](https://img.shields.io/npm/v/@rcp/hoc.mount.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/hoc.mount)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/hoc.mount.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/hoc.mount)

The high order component for mounting component

It's useful on modal component which requires should be mounted at other node (e.g. `document.body`) or requires single rendering instance.

## Installation

```bash
npm install @rcp/hoc.mount
# or use yarn
yarn add @rcp/hoc.mount
```

## Usage

```javascript
import mount from '@rcp/hoc.mount'

const Title = mount()(({ props }) => <h2>{props.title}</h2>)

ReactDOM.render(
  <div>
    <Title title="foo" />
    <Title title="bar" />
  </div>,
  window.root
)
// document.body.outerHTML
// <body>
//   <div id="root"></div>
//   <div><h2>bar</h2></div>
// </body>

const TitleComponent = mount({
  createTimeType: 'component',
  attributesGetter: ({ title }) => ({ id: title })
})(({ props }) => <h2>{props.title}</h2>)

ReactDOM.render(
  <div>
    <TitleComponent title="foo" />
    <TitleComponent title="bar" />
    <TitleComponent title="barbar" />
  </div>,
  window.root
)
// document.body.outerHTML
// <body>
//   <div id="root"></div>
//   <div id="foo"><h2>foo</h2></div>
//   <div id="bar"><h2>bar</h2></div>
//   <div id="barbar"><h2>barbar</h2></div>
// </body>
```

## API

#### Options

- `createTimeType` **(`"decorator"` \| `"class"` \| `"component"`)** (optional, default `'class'`)

  Create mount center in which time.

  - `decorator`: create at calling `mount()` time.
  - `class`: create at calling `mount()(Component)` time.
  - `component`: create at rendering `mount()(Component)` time.

- `mountNodeGetter` **(`(props) => HTMLElement`)** (optional, default `() => document.body`)
- `attributesGetter` **(`(props) => any`)** (optional, default `() => {}`)

## Related

- [@rcp/util.createmount](../util.createmount) - The utility for creating mountable view

## Authors

This library is written and maintained by imcuttle, <mailto:moyuyc95@gmail.com>.

## License

MIT
npm package: @rcp/hoc.uncontrolled
Description: The high order component for creating uncontrolled component
Author: imcuttle
Latest version: 3.0.0

# @rcp/hoc.uncontrolled

[![NPM version](https://img.shields.io/npm/v/@rcp/hoc.uncontrolled.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/hoc.uncontrolled)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/hoc.uncontrolled.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/hoc.uncontrolled)

The high order component for creating uncontrolled component

## Installation

```bash
npm install @rcp/hoc.uncontrolled
# or use yarn
yarn add @rcp/hoc.uncontrolled
```

## Usage

```javascript
import uncontrolled from '@rcp/hoc.uncontrolled'

// `props.defaultValue` and `props.value`
// could be assigned to `this.state.value` in `constructor` and `componentWillReceiveProps` automatically.
@uncontrolled(['value'])
class Input extends React.Component {
  render() {
    return <input value={this.state.value} />
  }
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### uncontrolled

#### Parameters

-   `propList`  {Prop\[]} eg. `['value']` / `[{ name: 'value', withDefault: false, eq: (a, b) => a === b }]`

Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** `(Component: React.ComponentClass) => React.ComponentClass`

## Related

## Authors

This library is written and maintained by imcuttle, <mailto:moyuyc95@gmail.com>.

## License

MIT
npm package: @rcp/use.behaviorsubject
Description: use hook for rxjs behavior subject
Author: 余聪
Latest version: 1.2.3

# @rcp/use.behaviorsubject

[![NPM version](https://img.shields.io/npm/v/@rcp/use.behaviorsubject.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.behaviorsubject)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.behaviorsubject.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.behaviorsubject)

use hook for rxjs behavior subject

## Installation

```bash
npm install @rcp/use.behaviorsubject
# or use yarn
yarn add @rcp/use.behaviorsubject
```

## Usage

### useBehaviorSubject

```javascript
import { BehaviorSubject } from 'rxjs'
import { useBehaviorSubject } from '@rcp/use.behaviorsubject'

const subject = new BehaviorSubject({ name: 'imcuttle' })
const App = () => {
  const [data, setData] = useBehaviorSubject(subject)
}
```

### createReactBehaviorSubject

```javascript
import { createReactBehaviorSubject } from '@rcp/use.behaviorsubject'
const { subject, useSubject } = createReactBehaviorSubject({ name: 'imcuttle' })

const App = () => {
  const [data, setData] = useSubject()
}
```

### useStateToSubject

React state pipe to subject, and subject effects to state

```javascript
import { BehaviorSubject } from 'rxjs'
import { useStateToSubject } from '@rcp/use.behaviorsubject'
const { subject, useSubject } = createReactBehaviorSubject({ name: 'imcuttle' })

const userSubject = new BehaviorSubject({})
const App = () => {
  const [user, setUser] = React.useState({ name: 'imcuttle' })
  useStateToSubject([user, setUser], userSubject)
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.compareeffect
Description: use custome compare effect
Author: 余聪
Latest version: 2.0.0

# @rcp/use.compareeffect

[![NPM version](https://img.shields.io/npm/v/@rcp/use.compareeffect.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.compareeffect)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.compareeffect.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.compareeffect)

use custome compare effect

## Installation

```bash
npm install @rcp/use.compareeffect
# or use yarn
yarn add @rcp/use.compareeffect
```

## Usage

```javascript
import useCompareEffect from '@rcp/use.compareeffect'

const App = () => {
  useCompareEffect(() => {}, deps, equals /* shadowEq by default */)
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.fetcher
Description: async data fetcher
Author: 余聪
Latest version: 2.0.1

# @rcp/use.fetcher

[![NPM version](https://img.shields.io/npm/v/@rcp/use.fetcher.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.fetcher)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.fetcher.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.fetcher)

async data fetcher

## Installation

```bash
npm install @rcp/use.fetcher
# or use yarn
yarn add @rcp/use.fetcher
```

## Usage

```javascript
import useFetcher from '@rcp/use.fetcher'

function App() {
  const [val, setVal, { loading, error }] = useFetcher(() => getAppData(), {}, [])
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.forceupdate
Description: forceUpdate like legacy react
Author: 余聪
Latest version: 1.2.1

# @rcp/use.forceupdate

[![NPM version](https://img.shields.io/npm/v/@rcp/use.forceupdate.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.forceupdate)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.forceupdate.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.forceupdate)

forceUpdate like legacy react

## Installation

```bash
npm install @rcp/use.forceupdate
# or use yarn
yarn add @rcp/use.forceupdate
```

## Usage

```javascript
import useForceupdate from '@rcp/use.forceupdate'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.i18n
Description: A react hook for using i18n
Author: imcuttle
Latest version: 1.1.18

# @rcp/use.i18n

[![NPM version](https://img.shields.io/npm/v/@rcp/use.i18n.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.i18n)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.i18n.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.i18n)

A react hook for using i18n

## Installation

```bash
npm install @rcp/use.i18n
# or use yarn
yarn add @rcp/use.i18n
```

## Usage

```javascript
import useI18n from '@rcp/use.i18n'

function App({ locale = {}, language = 'zh' } = {}) {
  const { i18n } = useI18n(
    {
      zh: {
        title: '标题',
        content: '${1}, 内容'
      },
      en: {
        title: 'Title',
        content: '${1}, Content'
      }
    },
    { locale, language }
  )

  return <p>{i18n('content', i18n('title'))}</p>
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by imcuttle, &lt;a href="<mailto:moyuyc95@gmail.com"">moyuyc95@gmail.com></a>.

## License

MIT
npm package: @rcp/use.i18ncontext
Description: A react hook for using i18n provider/consumer
Author: imcuttle
Latest version: 1.0.22

# @rcp/use.i18ncontext

[![NPM version](https://img.shields.io/npm/v/@rcp/use.i18ncontext.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.i18ncontext)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.i18ncontext.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.i18ncontext)

A react hook for using i18n provider/consumer

## Installation

```bash
npm install @rcp/use.i18ncontext
# or use yarn
yarn add @rcp/use.i18ncontext
```

## Usage

```javascript
import useI18ncontext from '@rcp/use.i18ncontext'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by imcuttle, <a href="mailto:moyuyc95@gmail.com">moyuyc95@gmail.com</a>.

## License

MIT
npm package: @rcp/use.persistfn
Description: use persist fn
Author: 余聪
Latest version: 2.0.0

# @rcp/use.persistfn

[![NPM version](https://img.shields.io/npm/v/@rcp/use.persistfn.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.persistfn)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.persistfn.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.persistfn)

use persist fn

## Installation

```bash
npm install @rcp/use.persistfn
# or use yarn
yarn add @rcp/use.persistfn
```

## Usage

```javascript
import usePersistfn from '@rcp/use.persistfn'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@fenbi.com">yucong@fenbi.com</a>.

## License

MIT
npm package: @rcp/use.persistref
Description: Persist the ref value
Author: 余聪
Latest version: 1.2.2

# @rcp/use.persistref

[![NPM version](https://img.shields.io/npm/v/@rcp/use.persistref.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.persistref)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.persistref.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.persistref)

Persist the ref value

## Installation

```bash
npm install @rcp/use.persistref
# or use yarn
yarn add @rcp/use.persistref
```

## Usage

```javascript
import usePersistRef from '@rcp/use.persistref'

const App = ({ val }) => {
  const valRef = usePersistRef(val)

  valRef.current === val
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.replacer
Description: Replace runtime value as your wish
Author: 余聪
Latest version: 2.0.0

# @rcp/use.replacer

[![NPM version](https://img.shields.io/npm/v/@rcp/use.replacer.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.replacer)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.replacer.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.replacer)

Replace runtime value as your wish

## Installation

```bash
npm install @rcp/use.replacer
# or use yarn
yarn add @rcp/use.replacer
```

## Usage

```javascript
import useReplacer from 'packages/use.replacer/index'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.shared
Description: shared value like recoil
Author: 余聪
Latest version: 2.0.1

# @rcp/use.shared

[![NPM version](https://img.shields.io/npm/v/@rcp/use.shared.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.shared)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.shared.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.shared)

shared value like recoil

## Installation

```bash
npm install @rcp/use.shared
# or use yarn
yarn add @rcp/use.shared
```

## Usage

```javascript
import { useShared, SharedProvider, useSharedProvider } from '@rcp/use.shared'

const Content = React.memo(({ symbol = fetchData }) => {
  // 必须使用唯一方法 ref，孩子获取数据
  const [data] = useShared(symbol)
  return <pre>{JSON.stringify(data, null, 2)}</pre>
})

const syncData = {
  wow: 123
}
const dynamicData = async (name) => ({
  wow: name
})
const Layout = ({ symbol = syncData }) => {
  // 提供数据，可以是静态数据，也可以是动态数据（同步或异步）
  // useSharedProvider(dynamicData, {}, [name])
  useSharedProvider(symbol, {}, [])
  return (
    <>
      <Content symbol={symbol} />
      <NoEffectComp />
    </>
  )
}

const NoEffect = jest.fn(() => {
  return null
})
const NoEffectComp = React.memo(NoEffect)

const App = ({ symbol }: any) => {
  // SharedProvider 用于提供共享数据存储载体，一般在 React Element Root 注入
  return (
    <SharedProvider>
      <Layout symbol={symbol} />
    </SharedProvider>
  )
}
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## useShared

数据获取，用于获取 `useSharedProvider` 共享的数据

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT
npm package: @rcp/use.syncstorage
Description: Sync state to storage
Author: 余聪
Latest version: 2.0.0

# @rcp/use.syncstorage

[![NPM version](https://img.shields.io/npm/v/@rcp/use.syncstorage.svg?style=flat-square)](https://www.npmjs.com/package/@rcp/use.syncstorage)
[![NPM Downloads](https://img.shields.io/npm/dm/@rcp/use.syncstorage.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/@rcp/use.syncstorage)

Sync state to storage

## Installation

```bash
npm install @rcp/use.syncstorage
# or use yarn
yarn add @rcp/use.syncstorage
```

## Usage

```javascript
import { useRouterHistoryStateSync, useLocalStorageStateSync } from '@rcp/use.syncstorage'
```

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

## Related

## Authors

This library is written and maintained by 余聪, <a href="mailto:yucong@yuanfudao.com">yucong@yuanfudao.com</a>.

## License

MIT