open-index/open-npm huggingface dataset:
npm package: @renzp/babel-plugin-jsx-scoped
Description: 实现jsx scoped的babel plugin
Author: renzp
Latest version: 0.0.7

# @renzp/babel-plugin-jsx-scoped

为`jsx`文件中添加`scoped`的`babel plugin`

> 注意：需要搭配`@renzp/css-scoped-loader`或`@renzp/postcss-css-scoped`一起使用

## Usage

```
npm init @renzp/babel-plugin-jsx-scoped
```
npm package: @renzp/build-info-webpack-plugin
Description: 一款将打包信息打印在控制台的webpack插件
Author: renzp
Latest version: 1.0.2
Deprecated: 此仓库功能已合并到unplugin-build-info。

此仓库功能已合并到[unplugin-build-info](https://github.com/renzp94/unplugin-build-info)。
npm package: @renzp/classes
Description: 条件式生成class字符串
Author: renzp
Latest version: 0.0.3

# @renzp/classes

条件式生成class字符串

## Install

```sh
npm i @renzp/classes
```

## Usage

```js
import classes from '@renzp/classes'

// 纯文本
classes('hello') // => "hello"
// 对象
classes({ hello: true, word: false }) // "hello"
// 数组
classes(['hello', 'word']) // "hello word"
// 对象数组
classes(['hello', { word: true }]) // "hello word"
```
npm package: @renzp/css-scoped-loader
Description: 实现css scoped的webpack loader
Author: renzp
Latest version: 0.0.16

# css-scoped-loader

为`css`文件中添加`scoped`的`loader`

> 注意：需要搭配`@renzp/jsx-scoped-loader`或`@renzp/swc-jsx-scoped`或`@renzp/babel-plugin-jsx-scoped`一起使用

## Usage

```
npm init @renzp/css-scoped-loader
```

```js
module: {
  rules: [
    {
      test: /\.scope\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        'css-loader',
        '@renzp/css-scoped-loader',
      ],
    },
  ],
},
```

## 样式穿透

如果需要样式穿透，可以使用`::global`

`原始代码`

```css
.app {
  color: #000;
}
::global .app {
  font-size: 20px;
}
```

`转换之后代码`

```css
.app[data-scope-4ef1f8c9] {
  color: #000;
}
.app {
  font-size: 20px;
}
```
npm package: @renzp/idxdb
Description: 一款零依赖、快速灵活、简单易用的indexedDB API库
Author: renzp
Latest version: 0.0.5

<p align="center"><a href="https://github.com/renzp94/idxdb" target="_blank" rel="noopener noreferrer"><img width="200" src="./logo.png" alt="@renzp/idxdb logo"></a></p>
<p align="center">
  <a href="https://npmcharts.com/compare/@renzp/idxdb?minimal=true"><img src="https://img.shields.io/npm/dm/@renzp/idxdb.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@renzp/idxdb"><img src="https://img.shields.io/npm/v/@renzp/idxdb.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@renzp/idxdb"><img src="https://img.shields.io/npm/l/@renzp/idxdb.svg?sanitize=true" alt="License"></a>
</p>

# @renzp/idxdb

一款零依赖、快速灵活、简单易用的indexedDB API库

## 安装

```sh
npm install @renzp/idxdb
```

## 使用

```ts
import { IdxDB } from '@renzp/idxdb'

const DB_NAME = "test"

await IdxDB.useDB({
  name: DB_NAME,
  version: 1,
  stores: [
    {
      name: 't_user',
      indexes: ['name', 'age'],
      keyPath: 'id',
    },
  ],
})
const db = new IdxDB(DB_NAME)
await db.connect()
await db?.store('t_user')?.getQuery({ values: {name: 'renzp94'} })
db.close()
```
npm package: @renzp/jsx-scoped-loader
Description: 实现jsx scoped的webpack loader
Author: renzp
Latest version: 0.0.24

# @renzp/jsx-scoped-loader

为`jsx`文件中添加`scoped`的`loader`

> 注意：需要搭配`@renzp/css-scoped-loader`或`@renzp/postcss-css-scoped`一起使用

## Usage

```
npm init @renzp/jsx-scoped-loader
```

```js
module: {
  rules: [
    {
      test: /\.tsx$/,
      exclude: /node_modules/,
      use: ['swc-loader', '@renzp/jsx-scoped-loader'],
    },
  ],
},
```

## Options

- loader: 'babel' | 'swc'，默认为'babel'
npm package: @renzp/postcss-css-scoped
Description: 实现css scoped的postcss plugin
Author: renzp
Latest version: 0.0.5

# @renzp/postcss-css-scoped

为`css`文件中添加`scoped`的`postcss plugin`

> 注意：需要搭配`@renzp/jsx-scoped-loader`或`@renzp/swc-jsx-scoped`或`@renzp/babel-plugin-jsx-scoped`一起使用

## Usage

```
npm init @renzp/postcss-css-scoped
```

## Options

- `resourcePath`: 当前处理文件的全路径
npm package: @renzp/storage
Description: localStorage Helper
Author: renzp
Latest version: 1.0.1

<p align="center"><a href="https://github.com/renzp94/storage" target="_blank" rel="noopener noreferrer"><img width="200" src="./logo.png" alt="storage logo"></a></p>
<p align="center">
  <a href="https://codecov.io/gh/renzp94/storage" > 
    <img src="https://codecov.io/gh/renzp94/storage/graph/badge.svg?token=GBIPNWKPRT"/> 
  </a>
  <a href="https://www.npmjs.com/package/@renzp/storage">
    <img src="https://img.shields.io/bundlejs/size/@renzp/storage?sanitize=true" alt="Bundle size">
  </a>
  <a href="https://npmcharts.com/compare/@renzp/storage?minimal=true">
    <img src="https://img.shields.io/npm/dm/@renzp/storage.svg?sanitize=true" alt="Downloads">
  </a>
  <a href="https://www.npmjs.com/package/@renzp/storage">
    <img src="https://img.shields.io/npm/v/@renzp/storage.svg?sanitize=true" alt="Version">
  </a>
  <a href="https://www.npmjs.com/package/@renzp/storage">
    <img src="https://img.shields.io/npm/l/@renzp/storage.svg?sanitize=true" alt="License">
  </a>
</p>

# storage

一款零依赖、快速灵活、简单易用的localStorage API库

## 安装

```sh
npm install @renzp/storage
```

# 使用

```ts
import storage from '@renzp/storage'

const token = 'WEB_TOKEN'

// 设置值
storage.set(token, 'UwhbBh1qzxHXMetSIRI3mQ1X')
// 获取值
const test = storage.get<string>(token)
// 清除值
storage.remove(token)
```
npm package: @renzp/swc-jsx-scoped
Description: 实现jsx scoped的swc plugin
Author: renzp
Latest version: 0.0.6

# @renzp/swc-jsx-scoped

为`jsx`文件中添加`scoped`的`swc plugin`

> 注意：需要搭配`@renzp/css-scoped-loader`或`@renzp/postcss-css-scoped`一起使用

## Usage

```
npm init @renzp/swc-jsx-scoped
```

## Options

- `resourcePath`: 当前处理文件的全路径
npm package: @renzp/utils
Description: 一款零依赖、实用的Javascript/Typescript工具库
Author: renzp
Latest version: 0.3.11

<p align="center"><a href="https://github.com/renzp94/utils" target="_blank" rel="noopener noreferrer"><img width="200" src="./logo.png" alt="@renzp/utils logo"></a></p>
<p align="center">
  <a href="https://codecov.io/github/renzp94/utils" > 
    <img src="https://codecov.io/github/renzp94/utils/graph/badge.svg?token=OXSH9CDYFE"/> 
  </a>
  <a href="https://bundlephobia.com/package/@renzp/utils">
    <img src="https://img.shields.io/bundlephobia/minzip/@renzp/utils?label=minzipped" alt="Bundle Size">
  </a>
  <a href="https://npmcharts.com/compare/@renzp/utils?minimal=true"><img src="https://img.shields.io/npm/dm/@renzp/utils.svg?sanitize=true" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/@renzp/utils"><img src="https://img.shields.io/npm/v/@renzp/utils.svg?sanitize=true" alt="Version"></a>
  <a href="https://www.npmjs.com/package/@renzp/utils"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"></a>
</p>

# @renzp/utils

一款零依赖、实用的Javascript/Typescript工具库

## 安装

```sh
npm install @renzp/utils
```

## 使用

```ts
import { isNumber } from '@renzp/utils'

const v: unknown = Math.PI
if (isNumber(v)) {
  console.log(v.toFixed(2)) // 3.14
}
```
更多使用方法可以查看[文档](https://renzp-utils.deno.dev/)
npm package: @renzp/vite-plugin-build-info
Description: 一款将打包信息打印在控制台的vite插件
Author: renzp
Latest version: 1.1.1
Deprecated: 此仓库功能已合并到unplugin-build-info。

此仓库功能已合并到[unplugin-build-info](https://github.com/renzp94/unplugin-build-info)。
npm package: @renzp/x6-react-components
Description: 基于@antv/x6封装的React组件
Author: renzp
Latest version: 0.0.6


<div align="center">
  <img height="128" src="./logo.jpeg" />
  <h3>
    <strong>@renzp/x6-react-components</strong>
  </h3>
  <div>
    基于@antv/x6封装的React组件
  </div>
</div>




## 安装

```sh
npm install @antv/x6 @renzp/x6-react-components
```

## 使用

```ts
import { Graph } from '@antv/x6'
import { useRef } from 'react'
import {
  X6CircleNode,
  X6Graph,
  X6ImageEdge,
  X6RectNode,
  X6SnapLine,
  X6ZoomTools,
  XDotGrid,
} from '../packages'
import ArrowImg from './assets/arrow.png'

const App = () => {
  const ref = useRef<Graph | undefined>()
  const nodes = Array.from({ length: 10 }).map((_, i: number) => {
    return {
      id: `node_${i}`,
      name: `Node-${i + 1}`,
      x: 200 * (i + 1),
      y: 400,
      type: i % 2 ? 'rect' : 'circle',
    }
  })

  const edges = nodes.reduce((prev: Array<any>, curr, i: number) => {
    let source = ''
    let target = ''

    if (i < nodes.length - 1) {
      const nextTarget = nodes[i + 1]
      source = curr.id
      target = nextTarget.id
    } else {
      return prev
    }
    return [...prev, { source, target }]
  }, [])

  const x6Data: any = { nodes, edges }

  const onMount = (graph: Graph) => {
    ref.current = graph
  }

  return (
    <div
      style={{
        height: '100vh',
      }}
    >
      <X6Graph onMount={onMount}>
        <XDotGrid />
        <X6ZoomTools />
        <X6SnapLine />
        {x6Data.nodes.map((item: any) => {
          return item.type === 'rect' ? (
            <X6RectNode
              key={item.id}
              zIndex={10}
              height={100}
              width={100}
              id={item.id}
              x={item.x}
              y={item.y}
              label={item.name}
            />
          ) : (
            <X6CircleNode
              key={item.id}
              zIndex={10}
              height={100}
              width={100}
              id={item.id}
              x={item.x}
              y={item.y}
              label={item.name}
            />
          )
        })}
        {x6Data.edges.map((item: any, i: number) => {
          return (
            <X6ImageEdge
              {...item}
              size={32}
              isRenderSourceMarker={false}
              image={ArrowImg}
              dashedLine
              key={`edge_${i}`}
            />
          )
        })}
      </X6Graph>
      {}
    </div>
  )
}

export default App
```
![](demo.png)
npm package: @renzycode/react-native-fb-photo-grid
Description: A React Native component to display photos in a grid like Facebook's newsfeed.
Author: Renzycode
Latest version: 0.1.8

# react-native-fb-photo-grid

> A React Native component to display photos in a grid like Facebook's newsfeed.

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

- 🔥 Display photos in a Facebook-style grid
- 🔥 Responsive layout
- 🔥 Customizable grid and gutter sizes
- 🔥 Accessible child to parent function

Example: https://github.com/renzycode/react-native-fb-photo-grid-example

<p align="center">
  <img src="https://github.com/renzycode/react-native-fb-photo-grid/blob/main/assets/react-native-fb-photo-grid.gif?raw=true" height="480" />
</p>

## Installation

```bash
yarn add @renzycode/react-native-fb-photo-grid
```

or

```bash
npm install --save @renzycode/react-native-fb-photo-grid
```

## Usage

```jsx
import React from 'react';
import { View } from 'react-native';
import FBPhotoGrid from '@renzycode/react-native-fb-photo-grid';

const photos = [
  'https://example.com/photo1.jpg',
  'https://example.com/photo2.jpg',
  'https://example.com/photo3.jpg',
];

const App = () => (
  <View>
    <FBPhotoGrid
      height={400}
      gutterColor="#fff"
      photos={photos}
      gutterSize={2}
      onTouchPhoto={(photoUri, index) => console.log(photoUri, index)}
    />
  </View>
);

export default App;
```

## Props

| Prop name                | Description                                                                                         | Type                                          | Default | Required |
| ------------------------ | --------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- | -------- |
| `Height`                 | Height of the photo grid                                                                            | number                                        | 400     | false    |
| `gutterColor`            | Background color of the grid                                                                        | string                                        | `#fff`  | false    |
| `photos`                 | Array of photo URIs                                                                                 | string[]                                      | []      | true     |
| `gutterSize`             | Size of space between photos                                                                        | number                                        | 0       | false    |
| `onTouchPhoto`           | Callback function when a photo is touched                                                           | (photoUri: string, index: number) => void     | ()=>{}  | false    |

## License

[MIT](LICENSE)
npm package: @reonomy/react-confetti-explosion
Description: A lightweight css-animation based confetti exploder for React
Author: Reonomy
Latest version: 1.0.32
Deprecated: this package has been moved to react-confetti-explosion

# React Confetti Explosion

This package is being deprecated from this organization.

Please use [react-confetti-explosion](https://www.npmjs.com/package/react-confetti-explosion).


## Author

[herrethan](https://github.com/herrethan)

## License

MIT
npm package: @reorbit/core
Description: Reorbit is a library that enables application state to be structured, dynamic, and composable.
Author: Richard Heng
Latest version: 0.0.13

# `reorbit`

Core libary for reorbit.

## Usage

See examples for useage.

[Basic](https://codesandbox.io/s/github/reorbit/reorbit/tree/master/packages/reorbit/examples/basic)
npm package: @reorbit/react
Description: Reorbit integration with React
Author: Richard Heng
Latest version: 0.0.13

# `react-reorbit`

React hooks for for binding reorbit orbs to views.

## Usage

See examples for useage.

[Counter](https://codesandbox.io/s/github/reorbit/reorbit/tree/master/packages/react-reorbit/examples/counter)

[Fractal](https://codesandbox.io/s/github/reorbit/reorbit/tree/master/packages/react-reorbit/examples/fractal)

[Sum](https://codesandbox.io/s/github/reorbit/reorbit/tree/master/packages/react-reorbit/examples/sum)
npm package: @reorbit/redux
Description: Redux integration with Reorbit
Author: Richard Heng
Latest version: 0.0.13

# `reorbit-redux`

Reorbit orb augmenter to enable compatability with Redux.

## Usage

See examples for useage.

[Fractal](https://codesandbox.io/s/github/reorbit/reorbit/tree/master/packages/reorbit-redux/examples/fractal)