open-index/open-npm huggingface dataset:
npm package: @react-data-grid/addons
Description: A set of addons for react-data-grid
Author: Adazzle
Latest version: 2.0.78

# react-data-grid-addons

> A set of addons for react-data-grid with things like editors, formatters, toolbars, filters..
 

## Install

```sh
npm install --save react-data-grid-addons
```

## Usage 

```sh
import { Editors, Formatters } from 'react-data-grid-addons';
const { DropDownEditor } = Editors;
const { DropDownFormatter } = Formatters;

const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];
const columns = [
  ...
  { 
    key: 'titles',
    name: 'Titles',
    editor: <DropDownEditor options={titles} />,
    formatter: DropDownFormatter 
  },
  ...
];

```

## Exports
This package exports:

name                   | source                                     |
-----------------------|--------------------------------------------|
Editors                | [Editors](./src/editors)                   |
Formatters             | [Formatters](./src/Formatters)             |
Toolbar                | [Toolbar](./src/toolbars/Toolbar.js)       |
ToolsPanel             | [ToolsPanelCell](./src/toolbars)           |
Data                   | [Data](./src/data)                         |
Menu                   | [Menu](./src/menu)                         |
Draggable              | [Draggable](./src/draggable)               |
Filters                | [Filters](./src/cells/headerCells/filters) |
npm package: @react-datepicker/hooks
Description: Create beautiful, fully customizable React datepickers and calendars with limitless styling and functionality options.
Author: Ariel Mints
Latest version: 0.2.2

<div align="center">
  <div>
<a href="[https://github.com/semantic-release/semantic-release/actions/workflows/test.yml](https://github.com/react-datepicker/useCalendar/actions/workflows/ci.yml)">
  <img alt="Build states" src="https://github.com/react-datepicker/useCalendar/actions/workflows/ci.yml/badge.svg">
</a>
</div>
<br />
<image src="https://github.com/user-attachments/assets/7061d873-5f25-405f-b1ce-aa1bdeb0e332" height="200px" width="200px" align="center" />
</div>
<br />
  
**🗓️ @react-datepicker/hooks** is a customizable, headless React calendar hooks library that empowers developers to build powerful and flexible calendar and date-picker components.

#### **🚀 Features**

- ✨ Single & Range Selection: Use the hook for both single-date and date-range selection.
- 🎨 Fully Customizable: Complete control over styling to match your app’s unique design.
- ♿ ARIA Support: Accessibility-first design to ensure your datepickers are user-friendly for everyone.
- 🌍 Locale Support: Easily configure for different regions.

---

### **Installation**

```bash
npm install @react-datepicker/hooks
```

### **Basic Usage**

Refer to the [Documentation](https://docs.react-calendar-ui.com) for detailed usage examples and customization options.

```tsx
import { useCalendar } from "@react-datepicker/ui";

// Controlled - pass value and onChange
const { displayedMonths, register, nextMonth, previousMonth, setYear } =
  useCalendar(
    { numberOfDisplayedMonths: 2 },
    // For controlled usage - pass value and onChange to the hook
    value,
    (date) => onChange(date)
  );

// Uncontrolled - state managed within the hook
const {
  value, // rangeValue for date range when isDateRange is true
  displayedMonths,
  register,
  nextMonth,
  setYear,
} = useCalendar({ numberOfDisplayedMonths: 2 });
```
npm package: @react-ddd/eslint-config
Description: ESLint config for TypeScript or React DDD projects
Author: Eric Siebeneich
Latest version: 0.4.0

# @react-ddd/eslint-config

This package is a draconian eslint-config largely based on
[airbnb](https://www.npmjs.com/package/eslint-config-airbnb) and
[airbnb-typescript](https://www.npmjs.com/package/eslint-config-airbnb-typescript).
It does NOT use Prettier, instead relying on only one tool to handle code
formatting.

## Differences from airbnb and airbnb-typescript

### [react/function-component-definition](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md)

Use arrow functions for all components

### [react/jsx-props-no-spreading](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md)

Disable

### [react/require-default-props](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md)

Disable, as we use TypeScript and type the props

### [@typescript-eslint/comma-dangle](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/comma-dangle.md)

**Only in .tsx files** Ignore for generics, so that you can have a single unconstrained generic for components:

```ts
const GenericComponent<T,> = (...) => {}
```

### [@typescript-eslint/brace-style](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/brace-style.md)

Disable ignoring single line. ALL braces are required, no single line if's!

### [@typescript-eslint/consistent-type-imports](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/consistent-type-imports.md)

Force TypeScript 3.8 style type imports for all types

### [@typescript-eslint/no-unused-expressions](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-unused-expressions.md)

Error, except for short circuit and ternary

## Testing specific rules

There are specific rules for `*.spec.tsx?` files to accomodate [`jest-gwt`](https://github.com/devzeebo/jest-gwt) style testing:

```js
rules: {
  'max-len': [
    'error',
    {
      code: 100,
      ignoreUrls: true,
      ignoreRegExpLiterals: true,
      ignorePattern,
    },
  ],
  'react/no-this-in-sfc': 'off',
  camelcase: 'off',
  '@typescript-eslint/naming-convention': 'off',
  'prefer-arrow-callback': 'off',
  'func-names': 'off',
  '@typescript-eslint/no-use-before-define': 'off',
  'no-param-reassign': 'off',
}
```
npm package: @react-debugger/core
Description: React debugger for humans and AI agents - inspect components, set breakpoints, and understand React internals programmatically
Latest version: 0.0.21

# React Debugger

Supercharge agents with React runtime values.

> ⚠️ Alpha. APIs subject to change.

## Why

AI agents are good at guessing. They can read your codebase, suggest edits, and point you in the right direction.

But they can’t see what’s _actually_ happening in your running app. That’s the missing piece.

React Debugger bridges that gap. It connects your React runtime to MCP-enabled agents (Cursor, Claude, VSCode, etc.), so they can inspect live components, props, and state — the same way you would in devtools.

This turns agents from **helpful advisors** into **practical debuggers**.

## Quickstart

1. Initialize the project (creates Cursor rule + MCP config):

```
npx @react-debugger/core init
```

Tip: to avoid getting a cached/older package from the registry, you can force the latest published version with:

```
npx @react-debugger/core@latest init
```

2. Enable the MCP server in your environment:

- Cursor: you should see a popup `New MCP server detected: react-debugger` → click "Enable". If not, open Settings → MCP & Integrations → MCP Tools and toggle `react-debugger`.
- Claude Desktop: look for the same popup or enable in Settings → MCP Servers.
- VS Code: open the Command Palette → Manage MCP Servers → Add or enable `react-debugger` (requires the MCP extension).
- Other: start locally with `npx @react-debugger/core mcp`.

If you've just run `init`, the CLI prints a short summary showing what was added and a single line with the most likely next step for your editor.

Need guided troubleshooting? Run:

```
npx @react-debugger/core help
```

This opens an interactive, terminal-only help menu with fixes for common problems (MCP server port conflicts, `mcp.json` issues, Cursor rules not applying).

## What you get

- **Agents with context**
  They don’t just guess — they can tell you exactly why your button isn’t clickable, or why a prop isn’t updating.

- **Faster debugging**
  “This component has disabled={true} because it’s inheriting state from X.” → Answers that normally take you 10–20 minutes to track down.

## Requirements

- React 16.8+
npm package: @react-dev-env/build-info-plugin
Description: Webpack Plugin: Writes `build-info.json` file with given build information
Author: Alexey Plutalov
Latest version: 0.4.0

# `@react-dev-env/build-info-plugin`

> TODO: description

## Usage

```
const buildInfoPlugin = require('@react-dev-env/build-info-plugin');

// TODO: DEMONSTRATE API
```
npm package: @react-dev-env/clean-source-maps-plugin
Description: Webpack Plugin: Removes source maps after they have been generated
Author: Alexey Plutalov
Latest version: 0.4.0

# `@react-dev-env/clean-source-maps-plugin`

> TODO: description

## Usage

```
const cleanSourceMapsPlugin = require('@react-dev-env/clean-source-maps-plugin');

// TODO: DEMONSTRATE API
```
npm package: @react-dev-env/web-app-manifest-plugin
Description: Generates Web Application Manifest and injects additional tags to the HTML
Author: Alexey Plutalov
Latest version: 0.4.0

# `@react-dev-env/web-app-manifest-plugin`

> TODO: description

## Usage

```
const webAppManifestPlugin = require('@react-dev-env/web-app-manifest-plugin');

// TODO: DEMONSTRATE API
```
npm package: @react-devui/hooks
Description: DevUI hooks based on React
Author: Xie Jay
Latest version: 18.6.2

<p align="center">
  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
</p>

<h1 align="center">React DevUI</h1>

<div align="center">

<!-- prettier-ignore-start -->
[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
<!-- prettier-ignore-end -->

</div>

<div align="center">

English | [简体中文](README.zh-CN.md)

</div>

## Installation

```bash
yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
```

## Getting Started

```tsx
import type { DRootProps } from '@react-devui/ui';

import { useMemo } from 'react';

import { DRoot } from '@react-devui/ui';

export default function App() {
  const rootContext = useMemo<DRootProps['context']>(
    () => ({
      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
    }),
    []
  );

  return (
    <DRoot context={rootContext}>
      <main id="app-main" style={{ overflow: 'auto' }}>
        <section id="app-content" style={{ height: '200vh' }}>
          Some content...
        </section>
      </main>
    </DRoot>
  );
}
```

## Links

- [react-devui.com](//react-devui.com)
- [admin.react-devui.com](//admin.react-devui.com)

## Contributing

Please read our [contributing guide](/CONTRIBUTING.md) first.

Need unit test support (Jest) 🤝.

## License

[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)
npm package: @react-devui/icons
Description: DevUI icons based on React
Author: Xie Jay
Latest version: 18.6.2

<p align="center">
  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
</p>

<h1 align="center">React DevUI</h1>

<div align="center">

<!-- prettier-ignore-start -->
[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
<!-- prettier-ignore-end -->

</div>

<div align="center">

English | [简体中文](README.zh-CN.md)

</div>

## Installation

```bash
yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
```

## Getting Started

```tsx
import type { DRootProps } from '@react-devui/ui';

import { useMemo } from 'react';

import { DRoot } from '@react-devui/ui';

export default function App() {
  const rootContext = useMemo<DRootProps['context']>(
    () => ({
      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
    }),
    []
  );

  return (
    <DRoot context={rootContext}>
      <main id="app-main" style={{ overflow: 'auto' }}>
        <section id="app-content" style={{ height: '200vh' }}>
          Some content...
        </section>
      </main>
    </DRoot>
  );
}
```

## Links

- [react-devui.com](//react-devui.com)
- [admin.react-devui.com](//admin.react-devui.com)

## Contributing

Please read our [contributing guide](/CONTRIBUTING.md) first.

Need unit test support (Jest) 🤝.

## License

[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)
npm package: @react-devui/ui
Description: DevUI components based on React
Author: Xie Jay
Latest version: 18.6.2

<p align="center">
  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
</p>

<h1 align="center">React DevUI</h1>

<div align="center">

<!-- prettier-ignore-start -->
[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
<!-- prettier-ignore-end -->

</div>

<div align="center">

English | [简体中文](README.zh-CN.md)

</div>

## Installation

```bash
yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
```

## Getting Started

```tsx
import type { DRootProps } from '@react-devui/ui';

import { useMemo } from 'react';

import { DRoot } from '@react-devui/ui';

export default function App() {
  const rootContext = useMemo<DRootProps['context']>(
    () => ({
      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
    }),
    []
  );

  return (
    <DRoot context={rootContext}>
      <main id="app-main" style={{ overflow: 'auto' }}>
        <section id="app-content" style={{ height: '200vh' }}>
          Some content...
        </section>
      </main>
    </DRoot>
  );
}
```

## Links

- [react-devui.com](//react-devui.com)
- [admin.react-devui.com](//admin.react-devui.com)

## Contributing

Please read our [contributing guide](/CONTRIBUTING.md) first.

Need unit test support (Jest) 🤝.

## License

[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)
npm package: @react-devui/utils
Description: DevUI utils based on React
Author: Xie Jay
Latest version: 18.6.2

<p align="center">
  <a href="//react-devui.com" rel="noopener" target="_blank"><img width="150" src="/packages/site/src/assets/logo.svg" alt="DevUI logo"></a>
</p>

<h1 align="center">React DevUI</h1>

<div align="center">

<!-- prettier-ignore-start -->
[![npm latest package](http://img.shields.io/npm/v/@react-devui/ui/latest.svg?style=flat-square)](https://www.npmjs.com/package/@react-devui/ui)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@react-devui/ui?style=flat-square)](https://bundlephobia.com/package/@react-devui/ui)
[![gitHub workflow status](https://img.shields.io/github/actions/workflow/status/DevCloudFE/react-devui/main.yml?branch=main&style=flat-square)](https://github.com/DevCloudFE/react-devui/actions/workflows/main.yml)
<!-- prettier-ignore-end -->

</div>

<div align="center">

English | [简体中文](README.zh-CN.md)

</div>

## Installation

```bash
yarn add @react-devui/ui @react-devui/icons @react-devui/hooks @react-devui/utils
```

## Getting Started

```tsx
import type { DRootProps } from '@react-devui/ui';

import { useMemo } from 'react';

import { DRoot } from '@react-devui/ui';

export default function App() {
  const rootContext = useMemo<DRootProps['context']>(
    () => ({
      layout: { pageScrollEl: '#app-main', contentResizeEl: '#app-content' },
    }),
    []
  );

  return (
    <DRoot context={rootContext}>
      <main id="app-main" style={{ overflow: 'auto' }}>
        <section id="app-content" style={{ height: '200vh' }}>
          Some content...
        </section>
      </main>
    </DRoot>
  );
}
```

## Links

- [react-devui.com](//react-devui.com)
- [admin.react-devui.com](//admin.react-devui.com)

## Contributing

Please read our [contributing guide](/CONTRIBUTING.md) first.

Need unit test support (Jest) 🤝.

## License

[![gitHub license](https://img.shields.io/github/license/DevCloudFE/react-devui?style=flat-square)](/LICENSE)
npm package: @react-efficiency/animate
Description: 动画
Latest version: 0.0.3

## Installation
**yarn**
`yarn add @react-efficiency/animate`

**npm**
`npm install @react-efficiency/animate --save`

## Features
Time dynamic generation of `transition all {time}ms ease-in-out`

## Simple example
```tsx
import Animate from '@react-efficiency/animate'
import * as React from 'react'

export const Demo: React.FunctionComponent<any> = () => {
  Const [state, setState] = React.useState({ in: false })

  Const startAnimate = () => {
    setState({ in: !state.in })
  }

  Return (
    <div>
      <Animate in={state.in} animateKey={['fade']}>
        <div>content</div>
      </Animate>

      <button onClick={startAnimate}>animate</button>
    </div>
  )
}
```

## Props extends Partial<TransitionProps>
| props            | type     | desc                                                                |
| :--------------- | :------- | :------------------------------------------------------------------ |
| animateKey       | string[] | Animated keys, can be combined, [reference animateKey](#animateKey) |
| animateCssModule | object   | cssModule                                                           |

Other props reference [TransitionProps] (https://reactcommunity.org/react-transition-group/css-transition)

## Animation status
Refer to [TransitionProps] (https://reactcommunity.org/react-transition-group/css-transition)
- `entered`
- `entering`
- `exited`
- `exiting`
- `unmounted`

## animateKey
CSS definition for each state
```scss
.animateKey {
  Opacity: 0;
 
  &.animateKey--entering {
    Opacity: 0;
  }

  &.animateKey--entered {
    Opacity: 1;
  }
}
```
npm package: @react-element/bg-music
Description: React (微信) 背景音乐
Author: jf3096
Latest version: 0.0.2-alpha.1

# @react-element/bg-music

> react (微信) 背景音乐, 详细文档后续补全

## Install

```bash
npm install --save @react-element/bg-music
```

## Usage

```tsx
import * as React from 'react'

import BgMusic from '@react-element/bg-music'

class Example extends React.Component {
  render () {
    return (
      <BgMusic.Default/>
    )
  }
}
```

## ChangeLog

## 0.0.1 (2018-11-18)
* feat: init commit

## License

MIT © [jf3096](https://github.com/jf3096)
npm package: @react-element/delay-load
Description: react suspend delay load
Author: jf3096
Latest version: 1.0.1-alpha.0

# @react-element/delay-load

> `delay-load` 组件用于降低组件加载优先级

[![NPM](https://img.shields.io/npm/v/@react-element/delay-load.svg)](https://www.npmjs.com/package/@react-element/delay-load) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @react-element/delay-load
```

## Usage

```tsx
import * as React from 'react'

import MyComponent from '@react-element/delay-load'

class Example extends React.Component {
  render () {
    return (
      <DelayLoad>
        <img src="path/to/img.png" />
      </DelayLoad>
    )
  }
}
```

## Props

```ts
type Props = {
  children: React.ReactNode;
  delay?: number;
  resolve?: boolean;
  disable?: boolean;
}
```

- children - 待渲染组件, 该组件必须为 React.Children.only
- delay - 延迟加载, 单位: ms
- resolve - 是否已经加载, 当当前组件 resolve 后, 不再重复 delay
- disable - 是否禁用直接返回 children

## License

MIT © [jf3096](https://github.com/jf3096)
npm package: @react-element/suspend-till-window-onload
Description: 降低优先级, 等到 window.onload 后再 mount
Author: jf3096
Latest version: 1.0.1-alpha.0

# @react-element/suspend-till-window-onload

> 降低优先级, 等到 window.onload 后再 mount

[![NPM](https://img.shields.io/npm/v/@react-element/suspend-till-window-onload.svg)](https://www.npmjs.com/package/@react-element/suspend-till-window-onload) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @react-element/suspend-till-window-onload
```

## Usage

```tsx
import * as React from 'react'

import SuspendTillWindowOnload from '@react-element/suspend-till-window-onload'

class Example extends React.Component {
  render () {
    return (
      <SuspendTillWindowOnload>
        <img src="path/to/img.png" />
      </SuspendTillWindowOnload>
    )
  }
}
```

## Props

```ts
type Props = {
  children: React.ReactNode;
  delay?: number;
  resolve?: boolean;
  disable?: boolean;
}
```

- children - 待渲染组件, 该组件必须为 React.Children.only
- resolve - 是否已经加载, 当当前组件 resolve 后, 不再重复 delay
- disable - 是否禁用直接返回 children

## License

MIT © [jf3096](https://github.com/jf3096)