open-index/open-npm huggingface dataset:
npm package: @react-spring/mock-raf
Description: A simple mock for requestAnimationFrame testing with fake timers.
Latest version: 1.1.1

# @react-spring/mock-raf

A simple mock for `requestAnimationFrame` testing with fake timers.

Adapted with gratitude from [`react-motion`](https://github.com/chenglou/react-motion/blob/dafff3f2b00ac11f39d91f3363cc97de664b2406/test/createMockRaf.js).

## Example

To use with `jest`/`jasmine` and `react-spring`:

```js
import createMockRaf from '@react-spring/mock-raf'
import { Globals, FrameLoop, SpringValue } from 'react-spring'

let mockRaf
beforeEach(() => {
  mockRaf = createMockRaf()
  Globals.assign({
    now: mockRaf.now,
    performanceNow: mockRaf.now,
    requestAnimationFrame: mockRaf.raf,
    cancelAnimationFrame: mockRaf.cancel,
    frameLoop: new FrameLoop(),
  })
})

it('animates from 0 to 1', () => {
  const value = new SpringValue(0)
  value.start(1)

  expect(value.get()).toBe(0)
  mockRaf.flush()
  expect(value.get()).toBe(1)
})
```

## API

### `createMockRaf()`

Creates a `mockRaf` instance, exposing the functions you'll use to interact with the mock.

Returns:

- now()
- raf()
- cancel()
- step()

```js
const mockRaf = createMockRaf()
```

&nbsp;

### `now()`

Returns the current `now` value of the mock. Starts at 0 and increases with each `step()` taken. Useful for stubbing out `performance.now()` or a polyfill when using `requestAnimationFrame` with timers.

&nbsp;

### `raf()`

Replacement for `requestAnimationFrame` or a polyfill. Adds a callback to be fired on the next step.

&nbsp;

### `cancel()`

Replacement for `cancelAnimationFrame` or a polyfill. Removes all currently scheduled `requestAnimationFrame` callbacks from the queue.

&nbsp;

### `flush()`

Continuously iterate the `requestAnimationFrame` queue until empty.

Useful for jumping to the end of an animation (or group of animations).

&nbsp;

### `step(options)`

Takes `requestAnimationFrame` steps. Fires currently queued callbacks for each step and increments `now` time for each step. The primary way to interact with a `mockRaf` instance for testing.

#### Options

`step()` takes an optional `options` object:

##### `time`

Type: `Number` Default: `1000 / 60`

The time that should pass during each `requestAnimationFrame` step in milliseconds. Default is roughly equivalent to default browser behavior.

##### `count`

Type: `Number` Default: `1`

The number of steps to take.
npm package: @react-spring/native
Description: [`react-native`](https://github.com/facebook/react-native) support
Author: Paul Henschel
Latest version: 10.0.3

# @react-spring/native

[`react-native`](https://github.com/facebook/react-native) support

**Note:** This package is not compiled before being published, because [Metro](https://github.com/facebook/metro)
handles that for us, which means we get proper sourcemap support!
npm package: @react-spring/rafz
Description: react-spring's fork of rafz one frameloop to rule them all
Author: Josh Ellis
Latest version: 10.0.3

# @react-spring/rafz

Coordinate `requestAnimationFrame` calls across your app and/or libraries.

- < 700 bytes min+gzip
- Timeout support
- Batching support (eg: `ReactDOM.unstable_batchedUpdates`)
- Uncaught errors are isolated
- Runs continuously (to reduce frame skips)

&nbsp;

## API

```ts
import { raf } from '@react-spring/rafz'

// Schedule an update
raf(dt => {})

// Start an update loop
raf(dt => true)

// Cancel an update
raf.cancel(fn)

// Schedule a mutation
raf.write(() => {})

// Before any updates
raf.onStart(() => {})

// Before any mutations
raf.onFrame(() => {})

// After any mutations
raf.onFinish(() => {})

// Set a timeout that runs on nearest frame
raf.setTimeout(() => {}, 1000)

// Use a polyfill
raf.use(require('@essentials/raf').raf)

// Get the current time
raf.now() // => number

// Set how you want to control raf firing
raf.frameLoop = 'demand' | 'always'
```

&nbsp;

## Notes

- Functions can only be scheduled once per queue per frame.
- Thus, trying to schedule a function twice is a no-op.
- The `update` phase is for updating JS state (eg: advancing an animation).
- The `write` phase is for updating native state (eg: mutating the DOM).
- [Reading] is allowed any time before the `write` phase.
- Writing is allowed any time after the `onFrame` phase.
- Timeout handlers run first on each frame.
- Any handler (except timeouts) can return `true` to run again next frame.
- The `raf.cancel` function only works with `raf` handlers.
- Use `raf.sync` to disable scheduling in its callback.
- Override `raf.batchedUpdates` to avoid excessive re-rendering in React.

[reading]: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

&nbsp;

## `raf.throttle`

Wrap a function to limit its execution to once per frame. If called more than once
in a single frame, the last arguments are used.

```ts
let log = raf.throttle(console.log)

log(1)
log(2) // nothing logged yet

raf.onStart(() => {
  // "2" is logged by now
})

// Cancel a pending call.
log.cancel()

// Access the wrapped function.
log.handler
```

## Prior art

- [fastdom](https://github.com/wilsonpage/fastdom)
- [framesync](https://github.com/Popmotion/popmotion/tree/master/packages/framesync)
npm package: @react-spring/shared
Description: Globals and shared modules
Author: Paul Henschel
Latest version: 10.0.3

# @react-spring/shared

Various helpers used by `@react-spring/core` and/or the platform targets (eg: `@react-spring/web`).

### Notable exports:

- The `Globals` object (updated with its `assign` method)
- The `createStringInterpolator` function
- The `createInterpolator` function
- The `normalizeColor` function
- The `FrameLoop` class
- The `colors` object
- The `colorToRgba` function
- The `FluidValue` class and related functions
npm package: @react-spring/three
Description: [`react-three-fiber`](https://github.com/drcmda/react-three-fiber) support. This package is for version 6 of react-three-fiber
Author: Paul Henschel
Latest version: 10.0.3

# @react-spring/three

[`react-three-fiber`](https://github.com/drcmda/react-three-fiber) support. This package is for version 6 of react-three-fiber
npm package: @react-spring/three-v5
Description: [`react-three-fiber`](https://github.com/drcmda/react-three-fiber) support. This package is for version 4-5 of react-three-fiber
Author: Paul Henschel
Latest version: 9.2.1
Deprecated: This package is non longer supported, use @react-spring/three with v6 @react-three/fiber

# @react-spring/three-v5

[`react-three-fiber`](https://github.com/drcmda/react-three-fiber) support. This package is for version 4-5 of react-three-fiber
npm package: @react-spring/zdog
Description: > [!WARNING] > This package uses react-zdog which does not support React 19 yet.
Author: Paul Henschel
Latest version: 10.0.3

# @react-spring/zdog

> [!WARNING]
> This package uses react-zdog which does not support React 19 yet.

[`zdog`](https://github.com/metafizzy/zdog) support
npm package: @react-spy/antd
Description: An enterprise-class UI design language and React components implementation
Latest version: 0.1.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @react-spy/antd

[![NPM version](https://img.shields.io/npm/v/@react-spy/antd.svg?style=flat)](https://npmjs.org/package/@react-spy/antd)
[![NPM downloads](http://img.shields.io/npm/dm/@react-spy/antd.svg?style=flat)](https://npmjs.org/package/@react-spy/antd)

## 📚 文档

- [文档地址](https://antd-react-spy.vercel.app/)

## ✨ 特性

- 基于 antd 封装，开箱即用
- 包含大量提炼业务组件
- 包含丰富的基础 demo 样式
- 使用 TypeScript 构建，提供完整的类型定义文件

## 📦 安装

```bash
$ npm install @react-spy/antd --save
```
或者
```bash
$ yarn add @react-spy/antd
```

## 🔨 简单使用

```tsx
/**
 * title: 自定义上传按钮组件
 * transform: true
 */
import React from 'react';
import { ButtonUpload } from "@react-spy/antd";

export default () => {
  return (
    <ButtonUpload
       uploadButtonRender={
          <div className='button'>
              <div className="button__content">Hover me and Click me</div>
          </div>
       }
    />
  );
};
```
npm package: @react-spy/react
Description: React framework - A simple version of the React framework for beginners to learn better.
Latest version: 0.0.3

# @react-spy/react

[![NPM version](https://img.shields.io/npm/v/@react-spy/react.svg?style=flat)](https://npmjs.org/package/@react-spy/react)
[![NPM downloads](http://img.shields.io/npm/dm/@react-spy/react.svg?style=flat)](https://npmjs.org/package/@react-spy/react)

## Install

```bash
$ yarn install
```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @react-state/data-strategy
Description: Contract for different data stratgies for @react-state
Author: Vytautas Pranskunas
Latest version: 2.0.0

# react-state-rxjs
![react-state-rxjs](/logo.png)

RxJS and ImmutableJs powered nested state management for React applications inspired by [@ngrx/store](https://github.com/ngrx/store).It is simple, fast, reliable and no boilerplate.

[![npm version](https://badge.fury.io/js/@react-state%2Fstore.svg)](https://badge.fury.io/js/@react-state%2Fstore)

- 🎓 Learn about it on the [docs site](https://vytautaspranskunas.gitbook.io/react-state-rxjs)
- 🚀 See it in action on [Stackblitz](https://stackblitz.com/edit/react-state-rxjs-example-app)
- 👉 Checkout the [sample application](https://github.com/react-state/example-app)
- 📖 Read the [blog posts](https://vytautaspranskunas.gitbook.io/react-state-rxjs/other-information/blog-posts)
- 📣 Join @react-state-rxjs [Gitter](https://gitter.im/App-State-Management/react-state-rxjs) room


## Contributing
<a name="contributing"></a>
Please read [contributing guidelines here](https://github.com/react-state/store/blob/master/CONTRIBUTING.md).
npm package: @react-state/immer-data-strategy
Description: Immer data strategy for @react-state/store
Author: Vytautas Pranskunas
Latest version: 2.0.0

# react-state-rxjs
![react-state-rxjs](/logo.png)

RxJS and ImmutableJs powered nested state management for React applications inspired by [@ngrx/store](https://github.com/ngrx/store).It is simple, fast, reliable and no boilerplate.

[![npm version](https://badge.fury.io/js/@react-state%2Fstore.svg)](https://badge.fury.io/js/@react-state%2Fstore)

- 🎓 Learn about it on the [docs site](https://vytautaspranskunas.gitbook.io/react-state-rxjs)
- 🚀 See it in action on [Stackblitz](https://stackblitz.com/edit/react-state-rxjs-example-app)
- 👉 Checkout the [sample application](https://github.com/react-state/example-app)
- 📖 Read the [blog posts](https://vytautaspranskunas.gitbook.io/react-state-rxjs/other-information/blog-posts)
- 📣 Join @react-state-rxjs [Gitter](https://gitter.im/App-State-Management/react-state-rxjs) room


## Contributing
<a name="contributing"></a>
Please read [contributing guidelines here](https://github.com/react-state/store/blob/master/CONTRIBUTING.md).
npm package: @react-state/immutablejs-data-strategy
Description: ImmutableJs data strategy for @react-state/store
Author: Vytautas Pranskunas
Latest version: 2.0.0

# react-state-rxjs
![react-state-rxjs](/logo.png)

RxJS and ImmutableJs powered nested state management for React applications inspired by [@ngrx/store](https://github.com/ngrx/store).It is simple, fast, reliable and no boilerplate.

[![npm version](https://badge.fury.io/js/@react-state%2Fstore.svg)](https://badge.fury.io/js/@react-state%2Fstore)

- 🎓 Learn about it on the [docs site](https://vytautaspranskunas.gitbook.io/react-state-rxjs)
- 🚀 See it in action on [Stackblitz](https://stackblitz.com/edit/react-state-rxjs-example-app)
- 👉 Checkout the [sample application](https://github.com/react-state/example-app)
- 📖 Read the [blog posts](https://vytautaspranskunas.gitbook.io/react-state-rxjs/other-information/blog-posts)
- 📣 Join @react-state-rxjs [Gitter](https://gitter.im/App-State-Management/react-state-rxjs) room


## Contributing
<a name="contributing"></a>
Please read [contributing guidelines here](https://github.com/react-state/store/blob/master/CONTRIBUTING.md).
npm package: @react-state/store
Description: RxJS and ImmutableJs powered nested state management for React apps inspired by @ngrx and Redux.
Author: Vytautas Pranskunas
Latest version: 7.1.3

# react-state-rxjs
![react-state-rxjs](/logo.png)

RxJS and ImmutableJs powered nested state management for React applications inspired by [@ngrx/store](https://github.com/ngrx/store).It is simple, fast, reliable and no boilerplate.

[![npm version](https://badge.fury.io/js/@react-state%2Fstore.svg)](https://badge.fury.io/js/@react-state%2Fstore)

- 🎓 Learn about it on the [docs site](https://vytautaspranskunas.gitbook.io/react-state-rxjs)
- 🚀 See it in action on [Stackblitz](https://stackblitz.com/edit/react-state-rxjs-example-app)
- 👉 Checkout the [sample application](https://github.com/react-state/example-app)
- 📖 Read the [blog posts](https://vytautaspranskunas.gitbook.io/react-state-rxjs/other-information/blog-posts)
- 📣 Join @react-state-rxjs [Gitter](https://gitter.im/App-State-Management/react-state-rxjs) room


## Contributing
<a name="contributing"></a>
Please read [contributing guidelines here](https://github.com/react-state/store/blob/master/CONTRIBUTING.md).
npm package: @react-stateless-dialog/core
Description: react-stateless-dialog is a powerful React & React Native library that allows developers to effortlessly show important information to users within their apps. With a range of versatile features, including a customizable snackbar, a global progress modal,
Latest version: 0.4.0-beta5

# react-stateless-dialog

react-stateless-dialog is a powerful React & React Native library that allows developers to effortlessly 
show important information to users within their apps. With a range of versatile features, including a customizable snackbar, 
a global progress modal, and a convenient dialog manager, this library simplifies the process of delivering essential messages to your user without
the need of managing painful states.

## Key Features:

- DialogManager: Effortlessly push dialogs using a simple React hook.
- SnackbarManager: Display eye-catching snackbar to instantly grab user attention. Customize the content and appearance of the snackbar to suit your app's branding and requirements.
- ProgressManager: Easily manage global progress indicators that inform users about ongoing background tasks or operations. Show progress, loading spinners to provide real-time feedback on the status of actions.

# Installation & Setup

This library is under active development, it consists on 3 packages:
 - `@react-stateless-dialog/core`: An abstraction layer that manage state & managers 
 - `@react-stateless-dialog/web`: The React implementation to use on Web (currently not available, under development)
 - `@react-stateless-dialog/native`: The React Native implementation to use on mobile

## Use on React Web

IN PROGRESS

## Use on React Native

```bash
yarn add @react-stateless-dialog/core @react-stateless-dialog/native

# The library rely on react-native-reanimated & react-native-safe-area-context, you need to install these packages in your project
yarn add react-native-reanimated react-native-safe-area-context
```

Setup react-native-reanimated:
```js
// Add this to your babel.config.js :
plugins: ['react-native-reanimated/plugin']
```

Setup the provider:
```tsx
import React from 'react';
import 'react-native-reanimated';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { overrideStatelessDialogConfig, StatelessDialogProvider } from '@react-stateless-dialog/core';
import { StatelessDialogConfigNative } from '@react-stateless-dialog/native';

// The config should be immutable and placed outside of the component
const statelessDialogConfig = overrideStatelessDialogConfig(StatelessDialogConfigNative, {
    // Customize the provider
});

function App() {
    return (
        // Note: SafeAreaProvider is required to make the library working
        <SafeAreaProvider>
            <StatelessDialogProvider config={statelessDialogConfig}>
                {/* App Content */}
            </StatelessDialogProvider>
        </SafeAreaProvider>
    );
}
```

# Usage

The full documentation is available here : https://pale-rook-06c.notion.site/React-Stateless-Dialog-d0ca1a2ee958454aa0ade7c9bddfa81f?pvs=4
npm package: @react-story-rich/core
Description: @react-story-rich helps to create narrative games with javascript basics.
Author: Nicolas Rouvière
Latest version: 2.0.0-beta.7

@react-story-rich helps to create narrative games with javascript basics.

Contrary to
[Ink](https://github.com/inkle/ink) or
[Twine](https://twinery.org/),
you don't have to learn a "proxy" language to get started.
On the other hand, the library remains sufficiently low level not to restrict itself in the possibilities.
This includes:
* A tree API to parse simple story definitions in JS or even in JSON
* A navigation API to navigate through a Story Node to another
* A history reducer to keep tracks of user actions and render a timeline
* Components & hooks to handle most common interactions

<img src="https://raw.githubusercontent.com/wasa42/react-story-rich/HEAD/documentation/assets/example.gif" alt="Example of a CardElement from @react-story-rich">

## Installation
```bash
npm install @react-story-rich/core -S
// or
yarn add @react-story-rich/core
```

## Getting started
With @react-story-rich, you can start with a template based on create-react-app already including the following topics:
* [Working with translations](https://wasa42.github.io/react-story-rich/#section-translations)
* [Dark mode & theming](https://wasa42.github.io/react-story-rich/#section-theming)
* [Local saves & persistence](https://wasa42.github.io/react-story-rich/#section-persistence)
* [Optimizing performance with virtualization](https://wasa42.github.io/react-story-rich/#section-virtualization)
* [Game oriented UI](https://wasa42.github.io/react-story-rich/#section-game-ui)
* [Hash Routing](https://wasa42.github.io/react-story-rich/#section-hash-routing)
* [Deploy to gh-pages](https://wasa42.github.io/react-story-rich/#section-deployment)

Find the template on GitHub: [react-story-rich-template](https://github.com/WaSa42/react-story-rich-template)

<img style="max-width: 100%;" src="https://raw.githubusercontent.com/wasa42/react-story-rich/HEAD/documentation/assets/settings-view.png" alt="Settings view template with dark mode on">

## Go further
To go further, you may be interested to create specific components like a dice roller for example
or puzzle games or a Pokémon like battle scene, everything is possible.

Check the documentation for how create your own custom components with hooks:
* [How to create custom components](https://wasa42.github.io/react-story-rich/#section-custom-component)
* [Use hooks for focus and interactions](https://wasa42.github.io/react-story-rich/#section-hooks)
npm package: @react-stuff/responsive
Description: https://react-stuff.netlify.app/
Author: NicolasRonsmans
Latest version: 0.4.1

# React Stuff - Responsive ![npm (scoped)](https://img.shields.io/npm/v/@react-stuff/responsive) ![Netlify](https://img.shields.io/netlify/84a47c5b-65a8-4a7e-a549-02a849bc1bf5)

https://react-stuff.netlify.app/

## Responsive Provider

This is the root component. It's responsible of:

- listening to resize events
- providing breakpoints/current breakpoint values to all its descendants

```
import { ResponsiveProvider } from '@react-stuff/responsive';
```

## Responsive Container

- applies a `width` value based on the current breakpoint
- will include `ResponsiveProvider` if `breakpoints` or `isRelativeToParent` are directly passed as props

```
import { ResponsiveContainer } from '@react-stuff/responsive';
```

## Responsive Grid

- applies the `gutter` value to its children
- will include `ResponsiveContainer` (and `ResponsiveProvider`) if `breakpoints`, `margins`, `widths`, `isRelativeToParent` or `isCentered` are directly passed as props

```
import { ResponsiveGrid } from '@react-stuff/responsive';
```

## Responsive Unit

Generally used within a `block`/`flex` container.

- applies `sizes` as a relative width based on its parent
- applies `offsets` as a relative margin based on its parent

```
import { ResponsiveUnit } from '@react-stuff/responsive';
```