open-index/open-npm huggingface dataset:
npm package: @react-theater/scroll
Description: React animations helpers
Author: prc5
Latest version: 1.0.0

# React theater

<p>
  <a href="https://bettertyped.com/">
    <img src="https://custom-icon-badges.demolab.com/static/v1?label=&message=BetterTyped&color=333&logo=BT" />
  </a>
  <a href="https://github.com/BetterTyped/react-theater">
    <img src="https://custom-icon-badges.demolab.com/github/stars/BetterTyped/react-theater?logo=star&color=118ab2" />
  </a>
  <a href="https://github.com/BetterTyped/react-theater/blob/main/License.md">
    <img src="https://custom-icon-badges.demolab.com/github/license/BetterTyped/react-theater?logo=law&color=yellow" />
  </a>
  <a href="https://github.com/semantic-release/semantic-release">
    <img src="https://custom-icon-badges.demolab.com/badge/semver-commitzen-e10079?logo=semantic-release&color=e76f51" />
  </a>
  <a href="https://github.com/BetterTyped/react-theater">
    <img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
  </a>
  <a href="https://www.npmjs.com/package/@react-theater/scroll">
    <img src="https://custom-icon-badges.demolab.com/npm/v/@react-theater/scroll.svg?logo=npm&color=E10098" />
  </a>
  <a href="https://www.npmjs.com/package/@react-theater/scroll">
    <img src="https://custom-icon-badges.demolab.com/bundlephobia/minzip/@react-theater/scroll?color=blueviolet&logo=package" />
  </a>
  <a href="https://www.npmjs.com/package/@react-theater/scroll">
    <img src="https://custom-icon-badges.demolab.com/npm/dm/@react-theater/scroll?logoColor=fff&logo=trending-up" />
  </a>
</p>

## About

Simple components and hooks for animating your applications on scroll

## Key Features

🔮 **Simple usage**

🚀 **Fast and light**

🎊 **SSR Support**

## Installation

```bash
npm install --save react-theater
```

or

```bash
yarn add react-theater
```

---
npm package: @react-theming/theme-swatch
Description: [![npm version](https://badge.fury.io/js/%40react-theming%2Ftheme-swatch.svg)](https://badge.fury.io/js/%40react-theming%2Ftheme-swatch)
Author: Oleg Proskurin
Latest version: 1.0.0

[![npm version](https://badge.fury.io/js/%40react-theming%2Ftheme-swatch.svg)](https://badge.fury.io/js/%40react-theming%2Ftheme-swatch)

# @react-theming/theme-swatch

## Install

```shell
npm i @react-theming/theme-swatch
```

## Usage

```js
import { createSwatch } from '@react-theming/theme-swatch';
/* you need to provide a `styled` functions from Styled Components, Emotion or '@storybook/theming'  */
import styled from '@emotion/styled';

const ThemeSwatch = createSwatch(styled);

colors = ['red', 'green', '#13f0b7', 'rgb(100,180,250)'];

const YourComponent = () => {
  return <ThemeSwatch theme={colors} size={64} />;
};
```

![example](https://raw.githubusercontent.com/react-theming/theme-swatch/master/docs/swatches12.png)

## Credits

<div align="left" style="height: 16px;">Created with ❤︎ to <b>React</b> and <b>CSS-in-JS</b> by <a
    href="https://twitter.com/UsulPro">@usulpro</a> [<a href="https://github.com/react-theming">React Theming</a>]
</div>
npm package: @react-three-dom/core
Description: DOM mirror, snapshot API, and interaction bridge for React Three Fiber
Latest version: 0.6.2

# @react-three-dom/core

DOM mirror, snapshot API, and interaction bridge for [React Three Fiber](https://github.com/pmndrs/react-three-fiber). Mirrors the Three.js scene graph into the DOM so you can query and interact with 3D objects from tests or the [Chrome DevTools extension](https://chromewebstore.google.com/detail/react-three-dom/knmbpbojmdgjgjijbepkmgpdklndlfkn).

## Install

```bash
npm install @react-three-dom/core
```

**Peer dependencies:** `react` (≥18), `@react-three/fiber` (≥8), `three` (≥0.150).

## Quick Start

Add `<ThreeDom />` inside your R3F `<Canvas>` so the scene is mirrored and the bridge is available to tests and DevTools:

```tsx
import { Canvas } from '@react-three/fiber';
import { ThreeDom } from '@react-three-dom/core';

<Canvas>
  <ThreeDom />
  <mesh userData={{ testId: 'hero-cube' }}>
    <boxGeometry />
    <meshStandardMaterial color="orange" />
  </mesh>
</Canvas>
```

Use `userData.testId` (or other keys) to identify objects in tests. The bridge exposes `window.__R3F_DOM__` for programmatic access and powers the Playwright/Cypress SDKs and the DevTools extension.

## Documentation

Full docs: **[surendra1151.github.io/react-three-dom](https://surendra1151.github.io/react-three-dom/)**

## License

MIT
npm package: @react-three-dom/cypress
Description: Cypress E2E testing SDK for React Three Fiber apps
Latest version: 0.6.2

# @react-three-dom/cypress

Cypress E2E testing SDK for [React Three Fiber](https://github.com/pmndrs/react-three-fiber) apps. Custom commands and Chai assertions to query and interact with 3D objects by test ID and wait for scene readiness.

## Install

```bash
npm install @react-three-dom/core
npm install -D @react-three-dom/cypress cypress
```

**Peer:** `cypress` ≥12.

## Setup

1. **App:** Use `@react-three-dom/core` with `<ThreeDom />` inside your `<Canvas>` and set `userData.testId` (or similar) on objects you want to target.

2. **Cypress support:** Import the package so it registers commands and assertions:

In `cypress/support/e2e.ts` (or your support file):

```ts
import '@react-three-dom/cypress';
```

3. **Test:** Use the custom commands and assertions:

```ts
it('scene works', () => {
  cy.visit('/');
  cy.r3fWaitForSceneReady();
  cy.r3f().r3fExist('hero-cube');
  cy.r3f().r3fHaveColor('hero-cube', '#ffa500');
  cy.r3f().r3fClick('hero-cube');
});
```

## Documentation

Full docs: **[surendra1151.github.io/react-three-dom](https://surendra1151.github.io/react-three-dom/)**

## License

MIT