open-index/open-npm huggingface dataset:
npm package: @piso/use-debounce-state
Description: Simple debounce state hooks
Latest version: 1.0.2

# @piso/use-debounce-state
Simple function to debounce `useState` value.

# Installation

_Hooks are not ready a for production. Checkout the official [React Hooks](https://reactjs.org/docs/hooks-intro.html) features._
You must use at minimum `react@16.7.0-alpha.0` to use this package.

`npm install @piso/use-debounce-state`

# Example

## Simple example
```javascript
import React from "react";
import ReactDOM from "react-dom";
import { useDebounceState } from "@piso/use-debounce-state";

function App() {
  const [value, setValue, debounceValue] = useDebounceState('', 500);

  return (
    <div className="App">
      <h1>Debounce state example : {debounceValue}</h1> 
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
```

## With useEffect

```javascript
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { useDebounceState } from '@piso/use-debounce-state';

function App() {
  const [value, setValue, debounceValue] = useDebounceState('', 500);
  const [users, setUsers] = useState([]);

  // Just for example
  useEffect(
    () => {
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(users => {
          const filtered = users.filter(user =>
            user.name.startsWith(debounceValue)
          );
          setUsers(filtered);
        })
        .catch(e => console.log(e));
    },
    [debounceValue]
  );

  return (
    <div className="App">
      <h1>Search user : {debounceValue}</h1>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <ul>
        {users.map(({ name, id }) => <li key={id}>{name}</li>)}
      </ul>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```
npm package: @pisodev/ui-native
Description: React Native를 위한 컴포넌트 라이브러리
Author: Piso
Latest version: 1.0.1

# @pisodev/ui-native

React Native UI components for mobile applications.

## Installation

```bash
npm install @pisodev/ui-native
```

This will automatically install `@pisodev/ui-common` as a dependency.

## Requirements

- React 17.0.0 or higher
- React Native 0.70.0 or higher

## Usage

```tsx
import { H1 } from '@pisodev/ui-native';
import { colors } from '@pisodev/ui-common';

function App() {
  return (
    <View>
      <H1>Hello World</H1>
    </View>
  );
}
```

## Available Components

- **H1**: Heading level 1 component with platform-specific styling

More components will be added in future releases.

## Platform-Specific Implementations

Components may have platform-specific implementations to ensure optimal performance and native look-and-feel:

```
H1/
├── H1.tsx           # Shared logic
├── H1.native.tsx    # React Native specific
└── index.ts
```

## Theme Integration

Components automatically integrate with the theme system from `@pisodev/ui-common`:

```tsx
import { lightColors, darkColors } from '@pisodev/ui-common';

// Use theme colors in your components
const theme = lightColors;
```

## TypeScript Support

Full TypeScript support with type definitions included.

## Platform Support

- iOS
- Android

## License

MIT © Piso
npm package: @pisodev/ui-web
Description: 웹을 위한 React 컴포넌트 라이브러리
Author: Piso
Latest version: 1.0.2

# @pisodev/ui-web

React UI components for web applications with SCSS styling.

## Installation

```bash
npm install @pisodev/ui-web
```

This will automatically install `@pisodev/ui-common` as a dependency.

## Requirements

- React 17.0.0 or higher
- React DOM 17.0.0 or higher

## Usage

```tsx
import { H1 } from '@pisodev/ui-web';
import { colors } from '@pisodev/ui-common';

function App() {
  return (
    <div>
      <H1>Hello World</H1>
    </div>
  );
}
```

## Available Components

- **H1**: Heading level 1 component with built-in styling

More components will be added in future releases.

## Styling

Components use SCSS modules for styling, ensuring:
- Scoped styles (no global CSS conflicts)
- Type-safe class names
- Easy customization through CSS variables

## Theme Integration

Components automatically integrate with the theme system from `@pisodev/ui-common`:

```tsx
import { lightColors, darkColors } from '@pisodev/ui-common';

// Use theme colors in your components
const theme = lightColors;
```

## Development

### Build

```bash
npm run build
```

This uses Rollup to bundle the components into:
- CommonJS format (`dist/index.js`)
- ES Module format (`dist/index.esm.js`)
- TypeScript definitions (`dist/index.d.ts`)

## Browser Support

- Modern browsers (Chrome, Firefox, Safari, Edge)
- ES2015+ support required

## License

MIT © Piso