open-index/open-npm huggingface dataset:
npm package: @someden/react-bootstrap
Description: React components that uses Bootstrap 4 as a base for styles.
Latest version: 0.4.3

[![Build Status](https://travis-ci.com/someden/react-bootstrap.svg?branch=master)](https://travis-ci.com/someden/react-bootstrap)

# React Bootstrap

React components that uses Bootstrap 4 as a base for styles.

Does not include Bootstrap and Font Awesome styles. You need to include it to your project, for example:
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
```

## Getting Started

Installation:
```
yarn add @someden/react-bootstrap
```

## Development

### Install dependencies

- Running `yarn` in the components's root directory will install everything you need for development.

### Demo Development Server

- `yarn start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
npm package: @somefix/nuxtjs-auth
Description: Authentication module for Nuxt.js with some fix
Latest version: 5.0.0

<h1 align="center" >🔑 Auth Module</h1>
<p align="center">Zero-boilerplate authentication support for Nuxt.js!</p>

<p align="center">
<a href="https://david-dm.org/nuxt-community/auth-module">
    <img alt="" src="https://david-dm.org/nuxt-community/auth-module/status.svg?style=flat-square">
</a>
<a href="https://standardjs.com">
    <img alt="" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square">
</a>
<a href="https://circleci.com/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/circleci/project/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<a href="https://codecov.io/gh/nuxt-community/auth-module">
    <img alt="" src="https://img.shields.io/codecov/c/github/nuxt-community/auth-module.svg?style=flat-square">
</a>
<br>
<a href="https://npmjs.com/package/@nuxtjs/auth-next">
    <img alt="" src="https://img.shields.io/npm/v/@nuxtjs/auth-next/latest.svg?style=flat-square">
</a>
<a href="https://npmjs.com/package/@nuxtjs/auth">
    <img alt="" src="https://img.shields.io/npm/dt/@nuxtjs/auth-next.svg?style=flat-square">
</a>
</p>

<p align="center">
<a href="https://auth.nuxtjs.org">Read Documentation</a>
</p>

**🚧 please see [status page](http://auth.nuxtjs.org/status) in documentation.**

## Development

Running demo for development:

```bash
$ yarn install
$ yarn dev
```

Running tests for development:

```bash
$ yarn build
$ yarn nuxt build test/fixture
$ yarn jest
```

## License

[MIT License](./LICENSE) - Copyright (c) Nuxt Community
npm package: @somehats/babel-plugin-flow-react-proptypes
Description: converts flow types to react proptypes
Author: Frankie Bagnardi
Latest version: 0.8.2

A babel plugin to generate React PropTypes definitions from Flow type declarations. Try it out on [astexplorer][astexp]!

[astexp]: http://astexplorer.net/#/YzN9Yq2vLH/4

## Example

With this input:

```js
var React = require('react');

type FooProps = {
  an_optional_string?: string,
  a_number: number,
  a_generic_object: Object,
  array_of_strings: Array<string>,
  instance_of_Bar: Bar,
  anything: any,
  one_of: 'QUACK' | 'BARK' | 5,
  onw_of_type: number | string,
  nested_object_level_1: {
    string_property_1: string,
    nested_object_level_2: {
      nested_object_level_3: {
        string_property_3: string,
      },
      string_property_2: string,
    }
  }
}

export default class Foo extends React.Component {
  props: FooProps
}
```

The output will be:

```js
var React = require('react');

var Foo = function (_React$Component) {
  // babel class boilerplate
}(React.Component)

Foo.propTypes = {
  an_optional_string: React.PropTypes.string,
  a_number: React.PropTypes.number.isRequired,
  a_generic_object: React.PropTypes.object.isRequired,
  array_of_strings: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
  instance_of_Bar: React.PropTypes.any.isRequired,
  anything: React.PropTypes.any.isRequired,
  one_of: React.PropTypes.oneOf(['QUACK', 'BARK', 5]).isRequired,
  onw_of_type: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
  nested_object_level_1: React.PropTypes.shape({
    string_property_1: React.PropTypes.string.isRequired,
    nested_object_level_2: React.PropTypes.shape({
      nested_object_level_3: React.PropTypes.shape({
        string_property_3: React.PropTypes.string.isRequired
      }).isRequired,
      string_property_2: React.PropTypes.string.isRequired
    }).isRequired
  }).isRequired
};

exports.default = Foo;
```

## Usage

This plugin searches for a type declaration (`type FooProps = {...}`) that has a name containing 'Props'.

It then searches for a class declaration, and it attaches a `propTypes` property to the class.

## Install

First install the plugin:

```sh
npm install --save-dev babel-plugin-flow-react-proptypes
```

Then add it to your babelrc:

```json
{
  "presets": ["..."],
  "plugins": ["flow-react-proptypes"]
}
```

To save some bytes in production, you can also only enable it in development mode.

```json
{
  "presets": ["..."],
  "env": {
    "development": {
      "plugins": ["flow-react-proptypes"]
    }
  }
}
```
npm package: @somehow-digital/commitlint-config
Description: Shared `commitlint` configurations for `somehow.digital` projects.
Latest version: 1.2.0

# `commitlint` configurations

> Shared `commitlint` configurations for `somehow.digital` projects.

---

**install**

```sh
pnpm add -D @somehow-digital/commitlint-config
```

**use**

```js
export default {
	extends: ['@somehow-digital/commitlint-config'],
};
```
npm package: @somehow-digital/commitlint-plugin-spellcheck
Description: Spellcheck commit messages via `cspell`.
Latest version: 1.1.0

# `spellcheck` plugin for `commitlint`

> Spellcheck commit messages via `cspell`.

---

**install**

```sh
pnpm add -D @somehow-digital/commitlint-plugin-spellcheck
```

**use**

```js
export default {
	rules: {
		'spellcheck/header': [2, 'always'],
		'spellcheck/body': [2, 'always'],
		'spellcheck/footer': [2, 'always'],
		'spellcheck/scope': [2, 'always'],
		'spellcheck/subject': [2, 'always'],
		'spellcheck/type': [2, 'always'],
	},
	plugins: ['@somehow-digital/commitlint-plugin-spellcheck'],
};
```
npm package: @somehow-digital/eslint-config
Description: Shared `eslint` configurations for `somehow.digital` projects.
Latest version: 5.0.2

# `eslint` configurations

> Shared `eslint` configuration for `somehow.digital` projects.

---

**install**

```sh
pnpm add -D @somehow-digital/eslint-config
```

**use**

```js
import config from '@somehow-digital/eslint-config';

export default config({
	unocss: true,
});
```
npm package: @somehow-digital/typescript-config
Description: Shared `typescript` configurations for `somehow.digital` projects.
Latest version: 3.0.0

# `typescript` configurations

> Shared `typescript` configurations for `somehow.digital` projects.

---

**install**

```sh
pnpm add -D @somehow-digital/typescript-config
```

**use**

```json
{
  "extends": "@somehow-digital/typescript-config/basic"
}
```
npm package: @somehow-digital/unocss-preset
Description: Shared `unocss` presets for `somehow.digital` projects.
Latest version: 2.3.0

# `unocss` presets

> Shared `unocss` presets for `somehow.digital` projects.

---

**install**

```sh
pnpm add -D @somehow-digital/unocss-preset
```

**use**

```js
import basic from '@somehow-digital/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
	presets: [basic()],
});
```
npm package: @someicons/icons-react
Description: React components for Some Icons (generated from SVG sources).
Latest version: 0.1.0

# @someicons/icons-react

React components for the Some Icons set. Each icon is a `forwardRef` SVG component generated from the repository’s SVG sources.

## Source of truth

Icons are defined only under **`icon-assets/`** at the repo root (`outline/` and `filled/`). This package does not ship or edit those SVGs; it only consumes them at build time.

## Generate

From the **repository root** (not this folder):

```bash
npm run generate:react
```

That runs `scripts/generate-react-icons.mjs` (one component per SVG in `packages/icons-react/src/icons/`) and `scripts/generate-react-exports.mjs` (rewrites `packages/icons-react/src/index.ts`).

## Build

From the repo root:

```bash
npm run build:react
```

Or generate and build in one step:

```bash
npm run build:react:all
```

Output is ESM plus TypeScript declarations in **`dist/`** (one file per icon under `dist/icons/`, plus a barrel `dist/index.js`).

You can import from the package root or load a single icon module:

```ts
import { ArrowLeft } from "@someicons/icons-react";
```

Per-icon subpath (also default-exported):

```ts
import ArrowLeft from "@someicons/icons-react/icons/ArrowLeft";
```

Bundlers can tree-shake unused icons when you use the root barrel.

## Peer dependency

Requires **React 17+** (`react` is a peer dependency).
npm package: @someimportantcompany/koa-vhost
Description: Virtual host support for Koa
Author: James D
Latest version: 1.0.1

[![NPM](https://badge.fury.io/js/%40someimportantcompany%2Fkoa-vhost.svg)](https://npm.im/@someimportantcompany/koa-vhost)
[![CI](https://github.com/someimportantcompany/koa-vhost/actions/workflows/ci.yml/badge.svg)](https://github.com/someimportantcompany/koa-vhost/actions/workflows/ci.yml)
[![Coverage](https://coveralls.io/repos/github/someimportantcompany/koa-vhost/badge.svg)](https://coveralls.io/github/someimportantcompany/koa-vhost)

Virtual host splitting for [Koa.js](https://koajs.com) v2.

## Install

```
$ npm install --save @someimportantcompany/koa-vhost
```

## Usage

```js
const Koa = require('koa');
const vhost = require('@someimportantcompany/koa-vhost');

const app = new Koa();

app.use(vhost('s1.example.com', ctx => {
  ctx.status = 200;
  ctx.body = 'server s1';
}));

app.use(vhost(/(s2|s3).example.com/, ctx => {
  ctx.status = 200;
  ctx.body = 'server s2 or s3';
}));

app.use(vhost([ 's4.example.com', 's5.example.com' ], ctx => {
  ctx.status = 200;
  ctx.body = 'server s4 or s5';
}));

app.use(vhost('t2.example.com', ctx => {
  ctx.status = 200;
  ctx.body = 'server t2';
}));

app.use(ctx => {
  ctx.status = 200;
  ctx.body = 'generic server';
});

app.listen(3000);
```

Then, assuming [httpie](https://httpie.io/):

```
$ http --print=HhBb http://localhost:54321
GET / HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: localhost:54321
User-Agent: HTTPie/1.0.3


HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 14
Content-Type: text/plain; charset=utf-8
Date: Sat, 03 Apr 2021 12:47:33 GMT
Keep-Alive: timeout=5

generic server
```

```
$ http --print=HhBb http://localhost:54321 Host:s1.example.com
GET / HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: s1.example.com
User-Agent: HTTPie/1.0.3

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 9
Content-Type: text/plain; charset=utf-8
Date: Sat, 03 Apr 2021 12:48:43 GMT
Keep-Alive: timeout=5

server s1
```

```
$ http --print=HhBb http://localhost:54321 Host:s2.example.com
GET / HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: s1.example.com
User-Agent: HTTPie/1.0.3

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 9
Content-Type: text/plain; charset=utf-8
Date: Sat, 03 Apr 2021 12:48:43 GMT
Keep-Alive: timeout=5

server s2 or s3
```

## API

### `vhost(hosts, middleware)`

Option | Description
---- | ----
`hosts` | Either a `Function`, `Array`, `RegExp` or `String` of the hosts to match.
`middleware` | Middleware `Function` to execute if the hostname matches.

## Notes

- Any questions or suggestions please [open an issue](https://github.com/someimportantcompany/koa-vhost/issues).
npm package: @somemedic/everything-ui
Description: React and Next.js UI library with components what I love
Author: SomeMedic
Latest version: 0.1.0

# EverythingUI - React and Next.js UI library with components what I love

[![npm version](https://img.shields.io/npm/v/@somemedic/everything-ui.svg)](https://www.npmjs.com/package/@somemedic/everything-ui)
[![License](https://img.shields.io/npm/l/@somemedic/everything-ui.svg)](https://github.com/yourusername/everything-ui/blob/main/LICENSE)

A modern, customizable UI component library built with React and Next.js. This library is actively maintained and regularly updated with new components.

## Features

- 🎨 Customizable theming system
- 🌍 Internationalization support
- 📱 Responsive components
- ⚡ Built with TypeScript
- 📚 Storybook documentation
- ⚛️ React 18 support
- 🔥 Next.js 14 compatible

## Installation

```bash
npm install @somemedic/everything-ui
# or
yarn add @somemedic/everything-ui
# or
pnpm add @somemedic/everything-ui
```

## Usage

Here's a quick example of how to use a Button component:

```tsx
import { Button } from '@somemedic/everything-ui';

function MyComponent() {
  return (
    <Button 
      variant="primary"
      onClick={() => console.log('Button clicked!')}
    >
      Click me
    </Button>
  );
}
```

## Documentation

For full documentation and component examples, please visit our Storybook:

```bash
# Run Storybook locally
npm run storybook
```

## Contributing

This library is in active development, and we're constantly adding new components and features. Contributions are welcome!

## License

MIT © [SomeMedic](https://github.com/SomeMedic)
npm package: @somemedic/rpg
Description: Rapid Package Generator - современный пакетный менеджер с поддержкой шаблонов проектов
Author: SomeMedic
Latest version: 1.0.1

# RPG (Rapid Package Generator)

Современный пакетный менеджер с поддержкой шаблонов проектов и удобным CLI интерфейсом.

## Установка

### Автоматическая установка

#### Windows
```powershell
# Запустите PowerShell от имени администратора и выполните:
iwr -useb https://raw.githubusercontent.com/SomeMedic/rpg/main/install.ps1 | iex
```

#### Linux/macOS
```bash
curl -fsSL https://raw.githubusercontent.com/SomeMedic/rpg/main/install.sh | bash
```

### Ручная установка
```bash
npm install -g @somemedic/rpg
```

## Основные команды

### Создание проекта

```bash
rpg create <template> [name] [-f|--force]
```

Доступные шаблоны:
- `react-app` - React + TypeScript + Vite
- `next-app` - Next.js + TypeScript + Tailwind CSS
- `express-api` - Express.js + TypeScript + Prisma + JWT
- `vue-app` - Vue 3 + TypeScript + Pinia
- `nest-api` - Nest.js + TypeScript + TypeORM + Swagger
- `electron-app` - Electron + React + TypeScript
- `react-native-app` - React Native + TypeScript + Navigation

### Управление зависимостями

```bash
# Установка пакетов
rpg install [...packages]     # Установить пакеты
rpg install -D [...packages]  # Установить dev-зависимости

# Удаление пакетов
rpg uninstall [...packages]   # Удалить пакеты
rpg uninstall -y             # Удалить без подтверждения

# Обновление пакетов
rpg update [...packages]      # Обновить пакеты
rpg update -y                # Обновить без подтверждения

# Просмотр зависимостей
rpg list                     # Список всех зависимостей
rpg list -D                  # Только dev-зависимости
rpg list -p                  # Только prod-зависимости
rpg list -j                  # Вывод в JSON формате
```

### Запуск скриптов

```bash
rpg run <script>             # Запустить скрипт из package.json
rpg run dev                  # Запустить dev сервер
rpg run build               # Собрать проект
rpg run test                # Запустить тесты
```

## Особенности

- 🎨 Красивый CLI интерфейс в военном стиле
- 📦 Поддержка deps.json для разделения зависимостей
- 🚀 Готовые шаблоны для популярных фреймворков
- ⚡️ Быстрая установка зависимостей
- 🔄 Автоматическое обновление пакетов
- 📋 Подробный вывод информации о зависимостях
- 🛡️ Проверка совместимости версий
- 🔍 Интерактивный выбор пакетов

## Конфигурация

RPG использует два файла для управления зависимостями:
- `package.json` - стандартный файл npm
- `deps.json` - дополнительный файл для более гибкого управления зависимостями

Пример `deps.json`:
```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3",
    "vite": "^5.0.8"
  }
}
```

## Лицензия

MIT
npm package: @someok/docusaurus-plugin-relative-paths
Description: Docusaurus plugin to convert absolute paths from build to relative paths.
Author: Daniel Costrasel
Latest version: 1.0.5

<h1 align="center">🦖 Docusaurus Plugin Relative Paths</h1>
<h3 align="center">Convert absolute paths to relative paths. Make the build files accessible from anywhere without a server.</h3>

<p align="center">
  <a href="https://www.npmjs.com/package/docusaurus-plugin-relative-paths">
    <img alt="npm" src="https://img.shields.io/npm/v/docusaurus-plugin-relative-paths">
  </a>
  <a href="https://github.com/ohkimur/docusaurus-plugin-relative-paths/actions/workflows/ci.yml">
    <img alt="CI" src="https://github.com/ohkimur/docusaurus-plugin-relative-paths/actions/workflows/ci.yml/badge.svg">
  </a>
  <a href="https://github.com/semantic-release/semantic-release">
    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
  </a>
  <a href="https://github.com/ohkimur/docusaurus-plugin-relative-paths/issues">
    <img alt="GitHub issues" src="https://img.shields.io/github/issues/ohkimur/docusaurus-plugin-relative-paths">
  </a>
</p>

## Installation

If using **npm**, run the following commnad:

```sh
npm i docusaurus-plugin-relative-paths
```

If using **yarn**, run the following commnad:

```sh
yarn add docusaurus-plugin-relative-paths
```

## Usage

In `docusaurus.config.js`, add the following code:

```js
module.exports = {
  // ...
  plugins: ['docusaurus-plugin-relative-paths'],
};
npm package: @someok/eslint-config-react
Description: someok react eslint config
Author: JX Wang
Latest version: 1.0.8

# eslint-config-react

我的常用 eslint 配置，之所以搞出这么个配置是为了方便在多个项目中引入，
而不需要在每个项目中拷贝一份。

此配置依赖 `airbnb` 的配置，并做了一些简单的调整。

## 安装

> npm i --save-dev @someok/eslint-config-react

## 配置

`.eslintrc.json` 配置：

```json
{
    "extends": [
        "@someok/eslint-config-react"
    ]
}
```

## 配置查看方式

如果想查看某项目下合并后的 eslint 配置，可以运行如下命令：

> npm run eslint -- --print-config .eslintrc.json
npm package: @someok/lazilyload
Description: React lazy load component for webpack
Author: JX Wang
Latest version: 1.1.4

# React 懒加载组件

这个组件是提取自 webpack [Lazy Loading - React](https://webpack.js.org/guides/lazy-load-react/)。

针对 webpack 的代码做了微调，增加了一个更加方便的调用方法。

安装方式：
> npm install --save @someok/lazilyload

## 测试准备

虽然本组件没有提供测试代码，不过为了保证你的测试代码能够成功，还需要安装下面组件以便 babel
能够正确解决 `import('xxx'')` 语法。

> npm install --save-dev babel-plugin-dynamic-import-node

然后在 `.babelrc` 的 `env > test` 区域增加如下配置： 
```json
{
    "env": {
        "test": {
            "presets": [
                "env",
                "react"
            ],
            "plugins": [
                "dynamic-import-node"
            ]
        }
    }
}
```

## 示例

使用方式可参考 `example/src` 下的代码。

### 简单方式

```javascript
import {lazilyComponent} from '@someok/lazilyload';

const Comp1 = (props) => lazilyComponent(import('./Comp1'))(props);
const Comp2 = (props) => lazilyComponent(import('./Comp2'))(props);

ReactDom.render(
    (<div>
        <Comp1/>
        <Comp2/>
    </div>),
    document.getElementById('root')
);
```

### 复杂方式

```javascript
import LazilyLoad, {importLazy} from '@someok/lazilyload';

const MultiComp = () => {
    return (
        <LazilyLoad
            modules={{
                Comp1: () => importLazy(import('./Comp1')),
                Comp2: () => importLazy(import('./Comp2')),
            }}
        >
            {({Comp1, Comp2}) => (
                <div>
                    <Comp1/>
                    <Comp2/>
                </div>
            )}
        </LazilyLoad>
    );
};


ReactDom.render(
    <MultiComp/>,
    document.getElementById('root')
);
```

EOF
npm package: @someok/react-debug
Description: React Debug Components
Author: JX Wang
Latest version: 1.0.3

# react-debug

放置一些 React 的 Debug 组件。

# 安装

> npm i --save @someok/react-debug

# 调用方式

```js
import {LifecycleDebug} from '@someok/react-debug';

export default LifecycleDebug(XxxComponent);
```

# 高阶组件

* LifecycleDebug 用于输出组件的生命周期的日志
npm package: @someok/simple-reducer-store
Description: React reducer context store, redux replace
Author: JX Wang
Latest version: 1.0.5

# simple-reducer-store

## 缘起

之前使用 redux 做状态管理，react 出了 context、hooks 之后就逐渐使用后者了，现在把这些共性的东西抽出来，搞成个组件，
方便使用。

## 功能

-   使用 [react-use createReducer](https://github.com/streamich/react-use/blob/master/docs/createReducer.md)
    创建 reducer，这个的好处是支持 redux 的 middlewares，例如
    [redux-logger](https://github.com/theaqua/redux-logger)
-   使用 [immer](https://github.com/immerjs/immer) 处理 reducer

## 安装

```bash
npm i --save react react-use immer lodash redux-logger
npm i --save @someok/simple-reducer-store
```

```bash
yarn add react react-use immer lodash redux-logger
yarn add @someok/simple-reducer-store
```

## 使用

-   定义 {key: value} 格式的 action 对象，支持汇总多个 action，注意 key 不能重复
-   使用 `createReducerContext` 定义 store
-   在业务中返回对应 context 中存储的数据 `const [store, dispatch] = useAuthStore();`
-   dispatch 支持三种格式
    -   `dispatch('test')`: 没有 `payload` 数据的时候可以直接将 action key 作为参数
    -   `dispatch(['test', values])`: 支持数组 [actionKey, payload]，算是对于传统 object 格式的简化
    -   `dispatch({type: 'test', payload: values})`: 传统的对象格式

## 示例

**actions.js**

```javascript
const actions = {
    test: (draft, payload) => {
        draft.data = payload;
    },
};

export default actions;
```

**test.js**

```javascript
import {createReducerContext, logger} from '@someok/simple-reducer-store';
import {isProd} from '@/env';

import testActions from './actions';

let middlewares = [];

// middleware 只在生产环境起作用
if (!isProd) {
    middlewares.push(logger);
}

const initialState = {
    foo: 'bar',
};

const [useAuthStore, AuthStoreProvider, AuthContext] = createReducerContext(...middlewares)(
    initialState,
    testActions
);

export {useTestStore, TestStoreProvider, TestContext};
```

**App.js**

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

**TestPage.js**

```javascript
import {useTestStore} from './test';

export default function TestPage() {
    const [store, dispatch] = useTestStore();

    function click() {
        dispatch('test');
        dispatch(['test', values]);
        dispatch({type: 'test', payload: values});
    }

    return (
        <div>
            <button onClick={click}>Test</button>
        </div>
    );
}
```
npm package: @someok/txt-to
Description: convert txt to epub, pdf, html etc
Author: JX Wang
Latest version: 1.8.0

# txt2epub

将 txt 文本转换为 epub 的命令行小工具，`TypeScript` 实现。

功能概述：

-   将单个 txt 按章节分隔为多个 txt
-   将 txt 所在文件夹作为 epub 目录，并生成 epub
-   支持对多个 txt 操作

## 安装方式

```
npm install @someok/txt2epub -g
```

### 使用方式

```bash
txt2epub [option] [command]
```

命令调用方式类似 `git xxx`。

```
Usage: txt2epub [options] [command]

转换指定文件夹下的 txt 为 epub 格式

Options:
  -v, --version        output the version number
  -h, --help           output usage information

Commands:
  init|i [dir]         交互式命令，初始化 yaml 格式的 metadata 文件, [dir] 未提供时采用当前目录
  split|s [options]    按章节分隔单个 txt 文件到目标路径下
  convert|c [options]  转换 txt 所在目录为 epub 格式

```
npm package: @someok/webpack-build-info-plugin
Description: generate webpack build info to json
Author: JX Wang
Latest version: 1.1.0

# webpack-build-info-plugin

webpack 打包后生成相关的 build-info.json

## Install
```bash
# npm
npm i @someok/webpack-build-info-plugin -D

#yarn
yarn add @someok/webpack-build-info-plugin -D
```

## Usage
```javascript
const WebpackBuildInfoPlugin = require('@someok/webpack-build-info-plugin');

// webpack plugin
plugins = [

    new WebpackBuildInfoPlugin(),

]
```

## Options
```javascript
new WebpackBuildInfoPlugin(options)
```

`options` 为对象，支持属性有：

|Option                 |类型         |默认值            |说明                 |
|----                   |----        |----              |----                |
|outputFilename         |string      |build-info.json   |输出文件名    |  
|outputGitInfo          |boolean     |true              |是否输出 git commit hash，默认为 true |  
|extraBuildProperties   |object      |{}                |额外属性                             |  

## Example

生成的 build-info.json 示例：
```json
{
    "hash": "ba40d5cc6739654e271b",
    "startTime": 1631101585078,
    "endTime": 1631101655628,
    "osInfo": {
        "arch": "x64",
        "platform": "darwin",
        "release": "20.4.0",
        "type": "Darwin",
        "username": "abc"
    },
    "commitHash": "7cfb3d4fd954134b8576d1a4f7decb84da6901aa"
}
```
npm package: @someonewithpc/craco-plugin-scoped-css
Description: This is a craco plugin that adds scoped css support to create-react-app version >= 2 (this package is part of [react scoped css solution](https://github.com/gaoxiaoliangz/react-scoped-css))
Latest version: 1.2.0

# craco-plugin-scoped-css ![](https://api.travis-ci.org/gaoxiaoliangz/react-scoped-css.svg?branch=master)

This is a craco plugin that adds scoped css support to create-react-app version >= 2 (this package is part of [react scoped css solution](https://github.com/gaoxiaoliangz/react-scoped-css))

## Installation

First, follow the [`craco` Installation Instructions](https://github.com/sharegate/craco/blob/master/packages/craco/README.md##installation) to install the `craco` package, create a `craco.config.js` file, and modify the scripts in your `package.json`.

Then install `craco-plugin-scoped-css`:

```bash
$ yarn add craco-plugin-scoped-css

# OR

$ npm i -S craco-plugin-scoped-css
```

## Usage

Here is a complete `craco.config.js` configuration file that adds react-scoped-css to `create-react-app`:

```js
module.exports = {
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css'),
    },
  ],
}
```

## Some common use cases with react scoped css

Check out [simple-scoped-css-example](https://github.com/gaoxiaoliangz/react-scoped-css/tree/master/examples/simple)