open-index/open-npm huggingface dataset:
npm package: @mohsensami/react-form
Description: A customizable React hook for forms.
Author: Mohsen Sami
Latest version: 1.0.1

# Modal React

## Manual Setup

## Demo

## Installation

To use the Modal component, you need to have a React environment set up. You can then add the Modal component files to your project.

The package can be installed via [npm](https://github.com/npm/cli):

```
npm install @mohsensami/react-hook-form
```

## Usage

React Component:

```javascript
import { useForm } from '@mohsensami/react-hook-form';
import {
    requiredValidator,
    minValidator,
    maxValidator,
    emailValidator,
} from '@mohsensami/react-hook-form/validators/rules';
import Input from '@mohsensami/react-hook-form/components/Input.js';

const [formState, onInputHandler] = useForm(
    {
        username: {
            value: '',
            isValid: false,
        },
        password: {
            value: '',
            isValid: false,
        },
    },
    false
);

return (
    <form action="#" className="login-form">
        <div className="login-form__username">
            <Input
                className="login-form__username-input"
                id="username"
                type="text"
                placeholder="Username"
                element="input"
                validations={[requiredValidator(), minValidator(8), maxValidator(20), emailValidator()]}
                onInputHandler={onInputHandler}
            />
            <i className="login-form__username-icon fa fa-user"></i>
        </div>
        <div className="login-form__password">
            <Input
                element="input"
                id="password"
                type="password"
                className="login-form__password-input"
                placeholder="Password"
                validations={[requiredValidator(), minValidator(8), maxValidator(18)]}
                onInputHandler={onInputHandler}
            />

            <i className="login-form__password-icon fa fa-lock-open"></i>
        </div>
        <button
            className={`login-form__btn ${formState.isFormValid ? 'login-form__btn-success' : 'login-form__btn-error'}`}
            type="submit"
            disabled={!formState.isFormValid}
        >
            <i className="login-form__btn-icon fas fa-sign-out-alt"></i>
            <span className="login-form__btn-text">ورود</span>
        </button>
    </form>
);
```

## Props

## Authors

-   [@mohsensami](https://github.com/mohsensami)

## Contributing

If you want to contribute to this project and make it better, your help is very welcome. Create an issue or submit a pull request.
npm package: @mohsensami/react-loading-skeleton
Description: A simple React loading skeleton component
Author: Mohsen Sami
Latest version: 1.0.7

# react-loading-skeleton

A lightweight and customizable React component for creating loading skeleton screens. This package provides an easy way to implement loading states in your React applications with smooth animations and various shape options.

## Installation

```bash
npm install @mohsensami/react-loading-skeleton
# or
yarn add @mohsensami/react-loading-skeleton
```

## Features

- Multiple shape variants (text, circle, rectangle)
- Customizable dimensions
- Smooth animation
- TypeScript support
- Lightweight and performant
- Easy to integrate

## Usage

```tsx
import { Skeleton } from "@mohsensami/react-loading-skeleton";

function MyComponent() {
  return (
    <div>
      {/* Text skeleton */}
      <Skeleton width={200} height={20} variant="text" />

      {/* Circle skeleton */}
      <Skeleton width={40} height={40} variant="circle" />

      {/* Rectangle skeleton */}
      <Skeleton width={300} height={100} variant="rect" />
    </div>
  );
}
```

## API Reference

### Skeleton Component

The `Skeleton` component accepts the following props:

| Prop      | Type                         | Default   | Description                                                                            |
| --------- | ---------------------------- | --------- | -------------------------------------------------------------------------------------- |
| width     | number \| string             | '100%'    | Width of the skeleton element. Can be a number (in pixels) or a string (e.g., '100%')  |
| height    | number \| string             | '100%'    | Height of the skeleton element. Can be a number (in pixels) or a string (e.g., '100%') |
| variant   | 'text' \| 'circle' \| 'rect' | 'text'    | Shape variant of the skeleton                                                          |
| style     | CSSProperties                | {}        | Additional CSS styles to apply to the skeleton                                         |
| className | string                       | undefined | Additional CSS class name to apply to the skeleton                                     |

## Examples

### Basic Text Skeleton

```tsx
<Skeleton width={200} height={20} variant="text" />
```

### Profile Picture Skeleton

```tsx
<Skeleton width={40} height={40} variant="circle" />
```

### Card Skeleton

```tsx
<Skeleton width={300} height={100} variant="rect" />
```

### Complex Layout

```tsx
<div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
  <Skeleton width={40} height={40} variant="circle" />
  <div style={{ flex: 1 }}>
    <Skeleton
      width="100%"
      height={20}
      variant="text"
      style={{ marginBottom: "8px" }}
    />
    <Skeleton width="60%" height={16} variant="text" />
  </div>
</div>
```

## License

MIT © [Mohsen Sami](https://github.com/mohsensami)