open-index/open-npm huggingface dataset:
npm package: @mohsensami/loading-skeleton
Description: A simple React loading skeleton component
Latest version: 1.0.4

# @mohsensami/loading-skeleton

A simple, lightweight React loading skeleton component for indicating content is loading. Perfect for lists, cards, or any area where you want to show a placeholder while fetching data.

## Features

- Minimal and easy to use
- Animated skeleton effect
- Zero dependencies (except React)
- Plug-and-play with default styling

## Installation

```bash
npm install @mohsensami/loading-skeleton
# or
yarn add @mohsensami/loading-skeleton
```

## Requirements

- React 17 or 18

## Usage

Import and use the `LoadingSkeleton` component in your React app:

```jsx
import React, { useState, useEffect } from "react";
import LoadingSkeleton from "@mohsensami/loading-skeleton";

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => setIsLoading(false), 3000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <h1>My App</h1>
      {/* Default color */}
      {isLoading ? <LoadingSkeleton /> : <div>Content Loaded!</div>}
      {/* Custom color */}
      {isLoading ? <LoadingSkeleton color="#ff8000" /> : null}
    </div>
  );
};

export default App;
```

## Props

| Name  | Type   | Default   | Description                        |
| ----- | ------ | --------- | ---------------------------------- |
| color | string | `#e0e0e0` | Background color of skeleton bars. |

## Styling

The component comes with default styles and animation. You can override the styles by targeting the following CSS classes in your own stylesheet:

- `.skeleton-container` — the wrapper for the skeleton items
- `.skeleton-item` — each animated skeleton bar

Default CSS (for reference):

```css
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-item {
  width: 100%;
  height: 50px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
```

## Customization

This version does **not** accept any props for customization. The skeleton always renders three bars. You can fork or extend the component for more advanced use cases.

## License

MIT
npm package: @mohsensami/persian-datepicker
Description: A beautiful and customizable Persian (Jalali) DatePicker component for React applications.
Latest version: 0.0.1

# @mohsensami/persian-datepicker

A beautiful and customizable Persian (Jalali) DatePicker component for React applications.

## Features

- 🎯 Easy to use and integrate
- 📅 Full Persian (Jalali) calendar support
- 🎨 Customizable styling
- 📱 Responsive design
- ⚡️ Built with TypeScript
- 🔒 Date range validation
- 🌐 RTL support

## Installation

```bash
npm install @mohsensami/persian-datepicker
# or
yarn add @mohsensami/persian-datepicker
```

## Usage

```tsx
import { useState } from "react";
import PersianDatePicker from "@mohsensami/persian-datepicker";

const MyComponent = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  return (
    <PersianDatePicker
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      placeholder="تاریخ را انتخاب کنید"
      minDate="2023-01-01"
      maxDate="2025-12-31"
    />
  );
};
```

## Props

| Prop            | Type                     | Default                  | Description                        |
| --------------- | ------------------------ | ------------------------ | ---------------------------------- |
| value           | `Date \| string \| null` | -                        | The selected date value            |
| onChange        | `(date: Date) => void`   | -                        | Callback when date changes         |
| className       | `string`                 | `""`                     | Additional class for the container |
| placeholder     | `string`                 | `"تاریخ را انتخاب کنید"` | Input placeholder text             |
| inputClass      | `string`                 | `""`                     | Additional class for the input     |
| calendarClass   | `string`                 | `""`                     | Additional class for the calendar  |
| disabled        | `boolean`                | `false`                  | Disable the date picker            |
| minDate         | `Date \| string`         | -                        | Minimum selectable date            |
| maxDate         | `Date \| string`         | -                        | Maximum selectable date            |
| showTodayButton | `boolean`                | `true`                   | Show/hide today button             |
| todayButtonText | `string`                 | `"امروز"`                | Text for today button              |

## Styling

The component comes with default styles, but you can customize it using the provided class names:

- `.persian-date-picker` - Main container
- `.date-input` - Input field
- `.calendar` - Calendar container
- `.calendar-header` - Calendar header
- `.calendar-backdrop` - Backdrop when calendar is open

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build the package
npm run build
```

## License

MIT © [Mohsen Sami](https://github.com/mohsensami)