open-index/open-npm huggingface dataset:
npm package: @react-salad/react
Description: Headless package for React Components
Author: Isaac Pak
Latest version: 0.0.2

# React Salad

<p>A React headless components library</p>

---

### Install

<code>npm install @react-salad/react</code>

<code>yarn add @react-salad/react</code>

## Contributing

If you're interested in contributing please use the github contribution template.
npm package: @react-sandbox/cursor-loader
Description: Cursor loader component
Author: William Grosset
Latest version: 1.1.0

<h1 align="center">
  <a href="https://www.npmjs.com/package/@react-sandbox/cursor-loader">@react-sandbox/cursor-loader</a>
</h1>

<p align="center">
  <img src="https://img.shields.io/github/actions/workflow/status/react-sandbox/cursor-loader/playwright.yml" alt="Build status" />
  <img src="https://img.shields.io/bundlephobia/minzip/@react-sandbox/cursor-loader?color=%234ba0f6" alt="Build size" />
  <img src="https://img.shields.io/npm/dt/@react-sandbox/cursor-loader?color=%234ba0f6" alt="Package downloads" />
</p>

<p align="center">
  <img src="example.gif" alt="Example" />
</p>

<p align="center">🖱️ Cursor loader component.</p>

## Usage

### Install

Install the `@react-sandbox/cursor-loader` package:

```
npm install @react-sandbox/cursor-loader
```

### Import

Import the `CursorLoader` component:

```tsx
import React, { useState } from 'react'
import CursorLoader from '@react-sandbox/cursor-loader'

function App() {
  const [load, setLoad] = useState(0)

  return (
    <div>
      <CursorLoader load={load} />
    </div>
  )
}
```

### Props

| Prop         | Type                            | Default      | Description                       |
| ------------ | ------------------------------- | ------------ | --------------------------------- |
| `load`       | `number`                        | **required** | Load/progress (between 0 and 100) |
| `color`      | `string`                        | `'#01D45B'`  | Color of loader                   |
| `size`       | `'sm' \| 'md' \| 'lg'`          | `'sm'`       | Size of loader                    |
| `trailDelay` | `0 \| 100 \| 200 \| 300 \| 500` | `300`        | Cursor trail delay                |
| `onComplete` | `function`                      | `-`          | Callback function on completion   |
| `className`  | `string`                        | `-`          | CSS classes                       |
| `style`      | `React.CSSProperties`           | `-`          | CSS styles                        |

## Development

### Local

```
pnpm install
pnpm dev
```

### Tests

```
pnpm test
```

### Example

Inside `test/`:

```
pnpm install
pnpm dev
```

## License

MIT
npm package: @react-sandbox/heart
Description: Animated heart button
Author: William Grosset
Latest version: 1.1.0

<h1 align="center">
  <a href="https://www.npmjs.com/package/@react-sandbox/heart">@react-sandbox/heart</a>
</h1>

<p align="center">
  <img src="https://img.shields.io/github/actions/workflow/status/react-sandbox/heart/playwright.yml" alt="Build status" />
  <img src="https://img.shields.io/badge/dependencies-0-brightgreen" alt="Dependencies" />
  <img src="https://img.shields.io/bundlephobia/minzip/@react-sandbox/heart?color=%234ba0f6" alt="Build size" />
  <img src="https://img.shields.io/npm/dt/@react-sandbox/heart?color=%234ba0f6" alt="Package downloads" />
</p>

<p align="center">
  <img src="example.gif" alt="Example" />
</p>

<p align="center">❤️ Animated heart button.</p>

## Usage

### Install

Install the `@react-sandbox/heart` package:

```
npm install @react-sandbox/heart
```

### Import

Import the `Heart` component:

```tsx
import React, { useState } from 'react'
import Heart from '@react-sandbox/heart'

function App() {
  const [active, setActive] = useState(false)

  return (
    <div>
      <Heart
        width={24}
        height={24}
        active={active}
        onClick={() => setActive(!active)}
      />
    </div>
  )
}
```

### Props

| Prop            | Type                  | Default      | Description             |
| --------------- | --------------------- | ------------ | ----------------------- |
| `width`         | `number`              | **required** | Heart width             |
| `height`        | `number`              | **required** | Heart height            |
| `active`        | `boolean`             | **required** | Heart fill & animation  |
| `onClick`       | `function`            | **required** | Click callback function |
| `activeColor`   | `string`              | `'#ff0000'`  | Active color            |
| `inactiveColor` | `string`              | `'#121212'`  | Inactive color          |
| `strokeWidth`   | `number`              | `30`         | Outline stroke width    |
| `disabled`      | `boolean`             | `false`      | Disable usage           |
| `ariaLabel`     | `string`              | `'Like'`     | Accessibility label     |
| `className`     | `string`              | `-`          | CSS classes             |
| `style`         | `React.CSSProperties` | `-`          | CSS styles              |

## Development

### Local

```
pnpm install
pnpm dev
```

### Tests

```
pnpm test
```

### Example

Inside `test/`:

```
pnpm install
pnpm dev
```

## License

MIT
npm package: @react-sandbox/heatmap
Description: Calendar heatmap component
Author: William Grosset
Latest version: 1.0.0

<h1 align="center">
  @react-sandbox/heatmap
</h1>

<p align="center">
  <img src="https://img.shields.io/github/actions/workflow/status/react-sandbox/heatmap/playwright.yml" alt="Build status" />
  <img src="https://img.shields.io/bundlephobia/minzip/@react-sandbox/heatmap?color=%234ba0f6" alt="Build size" />
  <img src="https://img.shields.io/npm/dt/@react-sandbox/heatmap?color=%234ba0f6" alt="Package downloads" />
</p>

<p align="center">
  <img src="example.png" alt="Example" />
</p>

<p align="center">
  📅🔥 Calendar heatmap component
</p>

<p align="center">
  Customizable SVG inspired by GitHub's contribution graph.
</p>

### Install

Install the `@react-sandbox/heatmap` package:

```
npm install @react-sandbox/heatmap
```

### Import

Import the `Heatmap` component:

```tsx
import React from 'react'
import Heatmap from '@react-sandbox/heatmap'

const values = [
  { date: new Date('2023-01-01T00:00:00'), count: 5 },
  { date: new Date('2023-01-05T00:00:00'), count: 10 },
  { date: new Date('2023-01-15T00:00:00'), count: 7 },
  { date: new Date('2023-02-08T00:00:00'), count: 3 }
  // ...
]

function App() {
  return (
    <div style={{ width: '500px' }}>
      <Heatmap
        startDate={new Date('2022-12-30T00:00:00')}
        values={values}
        emptyColor={[20, 30, 30]}
        baseColor={[0, 128, 0]}
        scaleFactor={35}
      />
    </div>
  )
}
```

### Props

| Prop          | Type                  | Default        | Description                                                 |
| ------------- | --------------------- | -------------- | ----------------------------------------------------------- |
| `startDate`   | `Date`                | **required**   | Start date                                                  |
| `values`      | `Array<Object>`       | **required**   | Array of values containing `date: Date` and `count: number` |
| `emptyColor`  | `RGB Tuple`           | `[20, 30, 30]` | Color of day with 0 `count`                                 |
| `baseColor`   | `RGB Tuple`           | `[0, 128, 0]`  | Color of day with 1 or more `count`                         |
| `scaleFactor` | `number`              | `10`           | Multiplier to be used against `baseColor`                   |
| `className`   | `string`              | `-`            | CSS classes                                                 |
| `style`       | `React.CSSProperties` | `-`            | CSS styles                                                  |

## Development

### Local

```
pnpm install
pnpm dev
```

### Tests

```
pnpm test
```

### Example

Inside `test/`:

```
pnpm install
pnpm dev
```

## License

MIT
npm package: @react-sandbox/sparkline
Description: Sparkline SVG component
Author: William Grosset
Latest version: 1.1.0

<h1 align="center">
  <a href="https://www.npmjs.com/package/@react-sandbox/sparkline">@react-sandbox/sparkline</a>
</h1>

<p align="center">
  <img src="https://img.shields.io/github/actions/workflow/status/react-sandbox/sparkline/playwright.yml" alt="Build status" />
  <img src="https://img.shields.io/bundlephobia/minzip/@react-sandbox/sparkline?color=%234ba0f6" alt="Build size" />
  <img src="https://img.shields.io/npm/dt/@react-sandbox/sparkline?color=%234ba0f6" alt="Package downloads" />
</p>

<p align="center">
  <img src="example.png" alt="Example" />
</p>

<p align="center">📈 Sparkline SVG component.</p>

## Usage

### Install

Install the `@react-sandbox/sparkline` package:

```
npm install @react-sandbox/sparkline
```

### Import

Import the `Sparkline` component:

```tsx
import React from 'react'
import Sparkline from '@react-sandbox/sparkline'

function App() {
  return (
    <div>
      <Sparkline
        values={[1, 2, 1, 4, 6, 8, 6]}
        width={50}
        height={50}
      />
    </div>
  )
}
```

### Props

| Prop          | Type                  | Default      | Description            |
| ------------- | --------------------- | ------------ | ---------------------- |
| `values`      | `Array<number>`       | **required** | Y-coordinates on graph |
| `width`       | `number`              | **required** | Sparkline width        |
| `height`      | `number`              | **required** | Sparkline height       |
| `lineColor`   | `string`              | `'#4989eb'`  | Line stroke color      |
| `lineWidth`   | `number`              | `3`          | Line stroke width      |
| `fillColor`   | `string`              | `'#b2cff2'`  | Fill area color        |
| `fillOpacity` | `number`              | `1`          | Fill area opacity      |
| `className`   | `string`              | `-`          | CSS classes            |
| `style`       | `React.CSSProperties` | `-`          | CSS styles             |

## Development

### Local

```
pnpm install
pnpm dev
```

### Tests

```
pnpm test
```

### Example

Inside `test/`:

```
pnpm install
pnpm dev
```

## License

MIT
npm package: @react-sandbox/tooltip
Description: Lightweight tooltip component
Author: William Grosset
Latest version: 1.2.0

<h1 align="center">
  <a href="https://www.npmjs.com/package/@react-sandbox/tooltip">@react-sandbox/tooltip</a>
</h1>

<p align="center">
  <img src="https://img.shields.io/github/actions/workflow/status/react-sandbox/tooltip/node.js.yml" alt="Build status" />
  <img src="https://img.shields.io/bundlephobia/minzip/@react-sandbox/tooltip?color=%234ba0f6" alt="Build size" />
  <img src="https://img.shields.io/npm/dt/@react-sandbox/tooltip?color=%234ba0f6" alt="Package downloads" />
</p>

<p align="center">
  <img src="example.gif" alt="Example" />
</p>

<p align="center">💬 Lightweight, customizable tooltip component.</p>

## Usage

### Install

Install the `@react-sandbox/tooltip` package:

```
npm install @react-sandbox/tooltip
```

### Import

Import the `Tooltip` component:

```tsx
import React from 'react'
import Tooltip from '@react-sandbox/tooltip'

function App() {
  return (
    <Tooltip title="Download ✅">
      <button>Save</button>
    </Tooltip>
  )
}
```

### Props

| Prop        | Type                                                  | Default      | Description              |
| ----------- | ----------------------------------------------------- | ------------ | ------------------------ |
| `title`     | `string`                                              | **required** | Text content             |
| `position`  | `'top' \| 'bottom' \| 'left' \| 'right'`              | `'top'`      | Position of tooltip      |
| `delay`     | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 750 \| 1000` | `200`        | Initial transition delay |
| `disabled`  | `boolean`                                             | `false`      | Visible or not           |
| `className` | `string`                                              | `-`          | CSS classes              |
| `style`     | `React.CSSProperties`                                 | `-`          | CSS styles               |

## Development

### Local

```
yarn
yarn dev
```

### Storybook

```
yarn storybook
```

### Tests

```
yarn test
```

## License

MIT