open-index/open-npm huggingface dataset:
npm package: @saif29oct/react-hooks
Description: A collection of reusable React hooks
Author: Saiful Islam
Latest version: 0.1.0

# React Hooks Library

A collection of reusable React hooks built with TypeScript to accelerate your development workflow.

## Installation

```bash
npm install @saif29oct/react-hooks
```

or

```bash
yarn add @saif29oct/react-hooks
```

## Available Hooks

### useLocalStorage

Persist state in localStorage.

```tsx
import { useLocalStorage } from '@saif29oct/react-hooks';

function App() {
  const [name, setName] = useLocalStorage('name', 'Guest');
  
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}
```

### useMediaQuery

Respond to media query changes.

```tsx
import { useMediaQuery } from '@saif29oct/react-hooks';

function App() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  
  return (
    <div>
      {isMobile ? 'Mobile View' : 'Desktop View'}
    </div>
  );
}
```

### useDebounce

Debounce rapidly changing values.

```tsx
import { useDebounce } from '@saif29oct/react-hooks';
import { useState, useEffect } from 'react';

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);
  
  useEffect(() => {
    // Search API call here
    console.log('Searching for:', debouncedSearchTerm);
  }, [debouncedSearchTerm]);
  
  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
    </div>
  );
}
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT
```

## 11. Build the Library

```bash
npm run build
```

## 12. Test Locally (Optional)

To test your library locally before publishing, you can use `npm link`:

```bash
npm link
```

Then in your test project:

```bash
npm link @saif29oct/react-hooks
```

## 13. Publish to npm

When you're ready to publish:

```bash
npm login
```

```bash
npm publish --access=public
```

## 14. Continuous Integration (Optional)

Consider setting up GitHub Actions for CI/CD:

```bash
mkdir -p .github/workflows
```

```bash
touch .github/workflows/publish.yml
```

Add the following to `publish.yml`:

```yaml:.github/workflows/publish.yml
name: Publish Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org/'
      - run: npm ci
      - run: npm run build
      - run: npm publish --access public
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
npm package: @saifhadded/react-hydration-status
Description: Une bibliothèque React simple pour gérer l'état d'hydratation SSR
Author: Saif Eddine Keraa
Latest version: 1.0.3

# @saifhadded/react-hydration-status

Une petite bibliothèque React pour détecter l'état d'hydratation côté client dans un contexte SSR (Server-Side Rendering).

## ✨ Fonctionnalités

- Détecte l'hydratation du composant après le rendu SSR
- Peut conditionner le rendu d'un composant client-only
- Léger et facile à utiliser

## 🚀 Installation

```bash
npm install @saifhadded/react-hydration-status
npm package: @saiful_bashar/ui-library
Description: A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.
Author: Saiful Bashar
Latest version: 1.0.8

## Installation

You can install this demo UI library using npm:

```
npm install @saiful_bashar/ui-library
```

## Usage

To use this demo UI library in your project, import the components you need from the library and use them in your React components.

```jsx
import React from "react";
import { Input, Button } from "@saiful_bashar/ui-library";

function App() {
  return (
    <div>
      <Input
        id="name"
        disabled={false}
        label="Enter your name"
        message="This field is required"
        error={false}
        success={false}
        onChange={(e) => console.log(e.target.value)}
        placeholder="Enter your name here"
      />
      <Button
        size="medium"
        primary={true}
        disabled={false}
        text="Click me!"
        onClick={() => alert("Button clicked!")}
      />
    </div>
  );
}

export default App;
```

## Contributing

This library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.

### Steps

- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using `npm install`.
- View the components in the browser using `npm run storybook`.
- Make your changes.
- Test the changes using `npm test`.
- Build the library using `npm run build`.
- Commit the changes and push them to your forked repository.
- Publish the package on [npm](https://www.npmjs.com/).
- Install and use the package in your project.