open-index/open-npm huggingface dataset:
npm package: @reactkits.dev/react-media-library
Description: Headless Media Library for React 19
Latest version: 0.0.3

# @reactkits.dev/react-media-library

A headless UI, fast media library for React 19+.

![Lighthouse Scores](https://raw.githubusercontent.com/papayaah/react-media-library/master/demo/lighthouse-result.png)

![Demo](https://raw.githubusercontent.com/papayaah/react-media-library/master/demo/lighthouse-demo.gif)

## Why This Library?

- **Headless** - Bring your own UI. Works with Tailwind, Mantine, or any component library
- **Fast** - Optimized for performance from day one. Zero layout shift, lazy loading, tree-shakeable
- **Simple** - Full media library in 10 lines of code
- **Local Storage** - No server needed. Uses IndexedDB + OPFS

## Installation

```bash
npm install @reactkits.dev/react-media-library

# Optional: icons
npm install lucide-react
```

## Quick Start

```tsx
import {
  MediaLibraryProvider,
  MediaGrid,
  tailwindPreset,
  lucideIcons
} from '@reactkits.dev/react-media-library';

function App() {
  return (
    <MediaLibraryProvider enableDragDrop={true}>
      <MediaGrid
        preset={tailwindPreset}
        icons={lucideIcons}
      />
    </MediaLibraryProvider>
  );
}
```

That's it. Drag & drop uploads, search, filters, grid/list/masonry views - all included.

## Headless Architecture

The library doesn't ship any UI. You provide components via a `preset`:

```tsx
const myPreset = {
  Card: (props) => <div className="my-card" {...props} />,
  Button: (props) => <button className="my-btn" {...props} />,
  TextInput: ({ value, onChange }) => (
    <input value={value} onChange={e => onChange(e.target.value)} />
  ),
  // ... see types for full list
};

<MediaGrid preset={myPreset} />
```

Built-in presets: `tailwindPreset`, `mantinePreset`

## Bundle Size

| Module             | Gzipped       |
| ------------------ | ------------- |
| Core               | 17 KB         |
| Image Editor       | 4.6 KB (lazy) |
| Cropper (optional) | 15 KB (lazy)  |

## License

MIT
npm package: @reactleaf/input
Description: Variable React Input components
Author: 양현석
Latest version: 1.0.0-beta.2

# @reactleaf/input

Variable Input components

[See on Storybook](https://main--6447d5ba8b8f8cd5016c6166.chromatic.com/)

## Usage

```sh
pnpm add @reactleaf/input
```

```tsx
import TextInput from "@reactleaf/input/TextInput"

function YourComponent() {
  const [value, setValue] = useState()
  return <TextInput value={value} onValueChange={setValue} />
}
```

### Use with hook-form-ready components

Install `react-hook-form`

```sh
pnpm add @reactleaf/input react-hook-form
```

```tsx
import useForm, { FormProvider } from "react-hook-form"
import TextInput from "@reactleaf/input/TextInput/hookform"

function YourComponent() {
  const form = useForm()
  return (
    <FormProvider {...form}>
      <TextInput name="hook-form-name" />
    </FormProvider>
  )
}
```

### Using Autocomplete, Combobox or DateInput

Autocomplete and Combobox depends on `react-select` and\
DateInput depends on `react-datepicker`.

```sh
pnpm add @reactleaf/input react-datepicker
```

```tsx
import DateInput from "@reactleaf/input/DateInput"

function YourComponent() {
  const [value, setValue] = useState()
  return <DateInput value={value} onSelect={setValue} />
}
```
npm package: @reactleaf/storage
Description: Type-safe storage accessor
Author: HS Yang
Latest version: 0.2.0

# @reactleaf/storage

[![npm version](https://badge.fury.io/js/@reactleaf%2Fstorage.svg)](https://badge.fury.io/js/@reactleaf%2Fstorage)

Type-safe and Unified way to access storage

## Purpose

This library gives you type-safe way to access storages.

## Installment

```sh
npm install @reactleaf/storage
# or
yarn add @reactleaf/storage
```

### Usage

```typescript
import StorageAccessor from '@reactleaf/storage`

const storage = new StorageAccessor<{ key: { value: number } }>("prefix")

// set
storage.set("key", { value: 1 })

// get
const { value } = storage.get("key")

// remove
storage.remove("key")
```

### StorageAccesssor

Storage Accessor has to know the types of stored values, to make it type-safe.

```typescript
const storage = new StorageAccesssor<{
  key: { value: number };
  SomeToken: string;
  SomeTimestamp: number;
}>("prefix");

// as accessor knows the types, it can be assure types of the value that we read from storage.
const token = storage.get("SomeToken"); // token is string
const { value } = storage.get("key"); // value is number
```

### Prefix

To distinguish storages, you can set prefix option.

```typescript
const defaultStorage = new StorageAccesssor<{ notified_100: boolean }>("myProject/"); // stored as `myProject/${key}`
const authStorage = new StorageAccesssor<{ accessToken: string }>("auth_"); // stored as `auth_${key}`
```

### Using Other Storage

Localstorage is our default storage, but you can use another storage.

Just put storage getter on accessor's second parameter.

```typescript
const storage = new StorageAccesssor("prefix", () => window.sessionStorage);
```

The reason that is not an storage, but getter, is SSR.
Storages are accessible only in client side, so not available during server-side runtime.
Using getter, we avoid the problem for SSR runtime error.

Alternative storages could be anything that implements Web Storage API.

### Limitation

Data will be serialized by `JSON.stringify`, and Deserialized by `JSON.parse`.
So, values like `Date` or `Class Instance` could not be saved and loaded properly.
npm package: @reactleaf/theme
Description: Theme provider for @reactleaf projects
Author: 양현석
Latest version: 2.0.2

# @reactleaf/theme

Theme Provider for @reactleaf projects

### Install

```sh
$ pnpm add @reactleaf/theme
```

#### Usage

## With Plain CSS

Just add `import '@reactleaf/theme/theme.css`

#### What'is in there

Colors are given in css variables.

```css
:root {
  --leaf-grey-100: ...
  --leaf-grey-95: ...
  --leaf-grey-90: ...
  --leaf-grey-80: ...
  --leaf-grey-70: ...
  --leaf-grey-10: ...

  --leaf-primary-98: ...
  --leaf-primary-95: ...
  --leaf-primary-90: ...
  --leaf-primary-80: ...
  --leaf-primary-70: ...
  --leaf-primary-60: ...
  --leaf-primary-50: ...
  --leaf-primary-40: ...
  --leaf-primary-30: ...
  --leaf-primary-20: ...
  --leaf-primary-10: ...

  --leaf-status-red: ...
  --leaf-status-yellow: ...
  --leaf-status-green: ...
  --leaf-status-blue: ...
  --leaf-status-grey: ...

  --leaf-status-lightRed: ...
  --leaf-status-lightYellow: ...
  --leaf-status-lightGreen: ...
  --leaf-status-lightBlue: ...
  --leaf-status-lightGrey: ...
}
```

Typos are just an classname.

```css
.leaf-title {
  font-size: 20px;
  line-height: 32px;
}
.leaf-body {
  font-size: 16px;
  line-height: 24px;
}
.leaf-label {
  font-size: 14px;
  line-height: 20px;
}
.leaf-desc {
  font-size: 12px;
  line-height: 18px;
}
```
npm package: @reactly/react-native-autoplay-scroll-video
Description: Extends React Native SectionList Component for position based autoplay video functionality.
Latest version: 1.1.1

# react-native-autoplay-scroll-video

<!-- <p>
<img src="https://travis-ci.org/APSL/react-native-autoplay-scroll-video.svg?branch=master" />
<img src="https://img.shields.io/npm/dm/react-native-autoplay-scroll-video.svg" />
<img src="https://img.shields.io/npm/dt/react-native-autoplay-scroll-video.svg" />
</p> -->

A SectionList component that identifies which item is in centre of the screen.

<p align="center">
<img src="https://i.imgflip.com/36ezfp.gif" alt="Scroll demo" width="400">
</p>


## Installation

Installation can be done through `npm` or `yarn`:

```shell
npm i react-native-autoplay-scroll-video --save
```

```shell
yarn add react-native-autoplay-scroll-video
```

## Example

Working Implementation as seen in GIF above - https://github.com/mikejcooper/React-Native-Autoplay-Infinity-Scroll

## Usage

We extend the SectionList component adding two new props: the

- focusWindow = The number of items above and below the centre that will be triggered in the callback.
- renderItemWithInfo = Replaces normal 'renderItem' function. Introduces two booleans, itemInFocus & itemInFocusWindow. 


```js
import SectionListInFocus from '@reactly/react-native-autoplay-scroll-video'
```

```jsx
<SectionListInFocus
    focusWindow={2}
    renderItemWithInfo={(item: VideoData, itemInFocus: boolean, itemInFocusWindow: boolean) => {
      return (
        <YourListItem
          playContent={itemInFocus}
          loadContent={itemInFocusWindow}
        />
      )
    }}
    {...YourSectionListProps}
/>
```


## API

### Props

All the `SectionList` props will be passed.

| **Prop**                    | **Type**                         | **Description**                                                                                |
| --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- |
| `renderItemWithInfo`        | `Function`                       | New renderItem function                                                           |
| `focusWindow`               | `number`                         | Items above and below the centre that will receive itemInFocusWindow as true.                                    |

## License

MIT.

## Author

Mike Cooper
npm package: @reactmaker/react-autocorrect-input
Description: Autocorrect input react component, suggested text when you type in.
Latest version: 1.0.2

# React Autocorrect Input Component

Autocorrect input react component, suggested text when you type in.

![screenshoot](screenshot/screenshot.gif)

### Doc
https://reactmaker.github.io/react-autocorrect-input/

### requirement

- React 16.4^

### Download from NPM

```
npm install @reactmaker/react-autocorrect-input
```

### How to use

```javascript
import React from 'react';
import { render } from 'react-dom';
import { hot } from 'react-hot-loader';
import Input from '@reactmaker/react-autocorrect-input';

class Demo extends React.Component {
  state = {
    value: '',
    dataSource: ['apple', 'ask', 'applice', 'best', 'book', 'beep', 'cat', 'can', 'car'],
  }

  onChange = (value) => this.setState({ value })

  render() {
    const { value, dataSource } = this.state;
    return (
      <Input onChange={this.onChange} value={value} dataSource={dataSource} />
    );
  }
}

const Main = hot(module)(Demo);

render(<Main />, document.getElementById('app'));

```