open-index/open-npm huggingface dataset:
npm package: @react-three-dom/playwright
Description: Playwright E2E testing SDK for React Three Fiber apps
Latest version: 0.6.2

# @react-three-dom/playwright

Playwright E2E testing SDK for [React Three Fiber](https://github.com/pmndrs/react-three-fiber) apps. Query and interact with 3D objects by test ID, run matchers (e.g. `toExist`, `toHaveColor`, `toBeInViewport`), and wait for scene readiness.

## Install

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

**Peer:** `@playwright/test` ≥1.40.

## 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. **Playwright config:** Use the provided fixture (e.g. in `playwright.config.ts` set `projects` that use the R3F fixture).

3. **Test file:** Import the custom test and matchers:

```ts
import { test, r3fMatchers } from '@react-three-dom/playwright';
import { expect } from '@playwright/test';

expect.extend(r3fMatchers);

test('scene works', async ({ page, r3f }) => {
  await page.goto('/');
  await r3f.waitForSceneReady();
  await expect(r3f).toExist('hero-cube');
  await expect(r3f).toHaveColor('hero-cube', '#ffa500');
  await r3f.click('hero-cube');
});
```

## Documentation

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

## License

MIT
npm package: @react-three/babel
Description: A Babel plugin for tree-shaking three.js via JSX.
Author: Umar Ahmed
Latest version: 1.0.2

# react-three-babel

[![Version](https://img.shields.io/npm/v/@react-three/babel?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/@react-three/babel)

A Babel plugin for [tree-shaking three.js via JSX](https://docs.pmnd.rs/react-three-fiber/api/canvas#tree-shaking).

```bash
npm install --save-dev @react-three/babel
```

```js
// .babelrc or babel.config.js
{
  plugins: ['module:@react-three/babel']
}
```
npm package: @react-three/lightmap
Description: In-browser lightmap/AO baker for react-three-fiber and ThreeJS
Author: Nick Matantsev
Latest version: 0.0.8

# @react-three/lightmap

**In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS.**

![example screenshot of lightmap baker output](./react-three-lightmap-example.png)

Example:

```jsx
<Lightmap>
  <mesh position={[0, 0, 0]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[3, 3, 1]} />
    <meshStandardMaterial attach="material" color="#ff6080" />
  </mesh>

  <mesh position={[0, 0, 1.8]} castShadow receiveShadow>
    <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
    <meshStandardMaterial attach="material" color="#4080ff" />
  </mesh>
</Lightmap>
```

**[Try it in this editable sandbox](https://codesandbox.io/s/github/pmndrs/react-three-lightmap/tree/v0.0.8/demo-sandbox)**.

NOTE: if you are using `mode="legacy"` on your `<Canvas>` tag please add `legacySuspense` flag to the lightmap, otherwise it will not wait until your scene content is fully loaded. This is not an issue in most situations, unless you have explicitly set the mode prop on `<Canvas>`.

## Local Development

```sh
git clone git@github.com:pmndrs/react-three-lightmap.git
cd react-three-lightmap
yarn
yarn storybook
```

## Notes

Based on [original experimental implementation](https://github.com/unframework/threejs-lightmap-baker) by [@unframework](https://github.com/unframework).
npm package: @react-to-styled/components
Description: All react-to-styled components
Author: Aleksa Toljic
Latest version: 0.3.1-alpha.2

[![License: MIT](https://img.shields.io/npm/l/@react-to-styled/components)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/components)](https://www.npmjs.com/package/@react-to-styled/components)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/components)](https://www.npmjs.com/package/@react-to-styled/components)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/components/latest)](https://www.npmjs.com/package/@react-to-styled/components)

# React to styled components

Package for simple css-in-js components.

## Installation

We suggest this package to be imported

Install with npm:

```sh
npm install @react-to-styled/components
```

Install with yarn:

```sh
yarn add @react-to-styled/components
```

## Usage

For usage please visit our [storybook](https://react-to.github.io/react-to-styled) documentation
npm package: @react-to-styled/essentials
Description: Essentials
Author: Aleksa Toljic
Latest version: 0.3.1-alpha.2

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/essentials)](https://www.npmjs.com/package/@react-to-styled/essentials)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/essentials)](https://www.npmjs.com/package/@react-to-styled/essentials)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/essentials/latest)](https://www.npmjs.com/package/@react-to-styled/essentials)

# React to styled essentials

This package contains essentials like suggested fonts, colors, etc.

## Installation

We suggest this package to be imported

Install with npm:

```sh
npm install @react-to-styled/essentials
```

Install with yarn:

```sh
yarn add @react-to-styled/essentials
```

## Import

```tsx
import { EssentialStyle, Colors, Fonts } from '@react-to-styled/essentials'
```

## Usage

Here is a quick example how to import essential styles:

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { EssentialStyle } from '@react-to-styled/essentials'

function App() {
  return (
    <div>
      <EssentialStyle />
      ...the rest of the app
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

You can also check our [storybook](https://react-to.github.io/react-to-styled) for more examples
npm package: @react-to-styled/icon
Description: Toggle input
Author: Aleksa Toljic
Latest version: 0.3.1-alpha.2

[![License: MIT](https://img.shields.io/npm/l/@react-to-styled/icon)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/icon)](https://www.npmjs.com/package/@react-to-styled/icon)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/icon)](https://www.npmjs.com/package/@react-to-styled/icon)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/icon/latest)](https://www.npmjs.com/package/@react-to-styled/icon)

# React to styled icon

We are using `react-inlinesvg` library for our icon component.

## Installation

We suggest this package to be imported

Install with npm:

```sh
npm install @react-to-styled/icon
```

Install with yarn:

```sh
yarn add @react-to-styled/icon
```

## Import

```tsx
import { Icon, IconProps, IconNames } from '@react-to-styled/icon'
```

## Dependencies

All our components depend on these dependencies

```json
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "styled-components": ">=5"
  }
}
```

## Usage

Here is a quick example how to add Icon:

```jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Icon } from '@react-to-styled/icon'

function App() {
  return <Icon name="arrow-down" />
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

You can also check our [storybook](https://react-to.github.io/react-to-styled/?path=/story/icon--page) for more examples
npm package: @react-to-styled/loader
Description: Loader
Author: Aleksa Toljic
Latest version: 0.3.1-alpha.2

[![License: MIT](https://img.shields.io/npm/l/@react-to-styled/loader)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/loader)](https://www.npmjs.com/package/@react-to-styled/loader)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/loader)](https://www.npmjs.com/package/@react-to-styled/loader)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/loader/latest)](https://www.npmjs.com/package/@react-to-styled/loader)

# React to styled loader

Package for simple css-in-js loader component.

## Installation

We suggest this package to be imported

Install with npm:

```sh
npm install @react-to-styled/loader
```

Install with yarn:

```sh
yarn add @react-to-styled/loader
```

## Import

```tsx
import { Loader, LoaderProps } from '@react-to-styled/loader'
```

## Dependencies

All our components depend on these dependencies

```json
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "styled-components": ">=5"
  }
}
```

## Usage

Here is a quick example how to add Loader:

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Loader } from '@react-to-styled/loader'

function App() {
  return (
    <div>
      <Loader />
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

You can also check our [storybook](https://react-to.github.io/react-to-styled) for more examples
npm package: @react-to-styled/table
Description: Table component with React and styled-components
Author: Aleksa Toljic
Latest version: 0.6.1-alpha.2

[![License: MIT](https://img.shields.io/npm/l/@react-to-styled/table)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/table)](https://www.npmjs.com/package/@react-to-styled/table)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/table)](https://www.npmjs.com/package/@react-to-styled/table)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/table/latest)](https://www.npmjs.com/package/@react-to-styled/table)

# React to styled table

Simple table easy to use, with minimal styling.

## Download

Our table components are available at npm, if you have an existing application run the following command to download it to your project.

```
npm install @react-to-styled/table
```

or

```
yarn add @react-to-styled/table
```

## Import

```jsx
import { Table, Paginator } from '@react-to-styled/table'
```

## Dependencies

All our components depend on these dependencies

```json
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "styled-components": ">=5"
  }
}
```

## Usage

Here is a quick example to get you started:

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Table } from '@react-to-styled/table'

function App() {
  const columns = {
    title: {
      header: 'Title',
      Cell: ({ data: { title } }) => <span>{title}</span>,
    },
    price: {
      header: 'Price',
      Cell: ({ data: { price } }) => <span>{price}</span>,
    },
  }

  const data = [
    { title: 'One', price: 100 },
    { title: 'Two', price: 200 },
  ]

  return <Table data={data} columns={columns} />
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

You can also check our [storybook](https://react-to.github.io/react-to-styled) for more examples
npm package: @react-to-styled/toggle
Description: Toggle input
Author: Aleksa Toljic
Latest version: 0.3.1-alpha.3

[![License: MIT](https://img.shields.io/npm/l/@react-to-styled/toggle)](https://github.com/react-to/react-to-styled/blob/main/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/react-to/react-to-styled)](https://github.com/react-to/react-to-styled/graphs/contributors)
[![npm](https://img.shields.io/npm/v/@react-to-styled/toggle)](https://www.npmjs.com/package/@react-to-styled/toggle)
[![npm](https://img.shields.io/npm/dm/@react-to-styled/toggle)](https://www.npmjs.com/package/@react-to-styled/toggle)
[![First good issue](https://img.shields.io/github/labels/react-to/react-to-styled/good%20first%20issue?label=Contribute)](https://github.com/react-to/react-to-styled/labels/good%20first%20issue)
[![Package size](https://img.shields.io/bundlephobia/min/@react-to-styled/toggle/latest)](https://www.npmjs.com/package/@react-to-styled/toggle)

# React to styled toggle

Package for simple css-in-js switch component.

## Installation

We suggest this package to be imported

Install with npm:

```sh
npm install @react-to-styled/toggle
```

Install with yarn:

```sh
yarn add @react-to-styled/toggle
```

## Import

```tsx
import { Toggle, ToggleProps } from '@react-to-styled/toggle'
```

## Dependencies

All our components depend on these dependencies

```json
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "styled-components": ">=5"
  }
}
```

## Usage

Here is a quick example how to add Loader:

```jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Toggle } from '@react-to-styled/toggle'

function App() {
  const [checked, setChecked] = useState()

  return (
    <Toggle checked={checked} onChange={e => setChecked(e.target.checked)} />
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))
```

You can also check our [storybook](https://react-to.github.io/react-to-styled) for more examples