open-index/open-npm huggingface dataset:
npm package: @mhld/prettier-config
Description: Shared Prettier config for my project
Author: Mikhail Danshin
Latest version: 2.0.0

# prettier-config

> Shared [Prettier config](https://prettier.io/docs/en/configuration.html) for my projects

## Install

```sh
npm install --save-dev @mhld/prettier-config
```

## Usage

Add in your `package.json`

```json
  {
    "prettier": "@mhld/prettier-config"
  }
```

If you want to overwrite some properties, update your project's `prettier.config.js` file to import the rule sets you want:

```js
module.exports = {
  ...require('@mhld/prettier-config'),
  // your overrides here
};
```

---

Read the [Prettier config docs](https://prettier.io) for more information.
npm package: @mhld/tsconfig
Description: Shared Typescript config for my project
Author: Mikhail Danshin
Latest version: 0.1.0

# tsconfig

> Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for my projects

## Install

```sh
npm install --save-dev @mhld/tsconfig
```

*This config requires TypeScript 4.7 or later.*

## Usage

`tsconfig.json`

```json
{
	"extends": "@mhld/tsconfig",
	"compilerOptions": {
		"outDir": "dist"
	}
}
```

When you are targeting a higher version of Node.js, check the relevant ECMAScript version and add it as `target`:

```json
{
	"extends": "@mhld/tsconfig",
	"compilerOptions": {
		"outDir": "dist",
		"target": "ES2021"
	}
}
```
npm package: @mhluska/react-plyr
Description: A simple, accessible HTML5 media player React Component
Author: Jose Miguel Bejarano
Latest version: 1.12.1

# ReactPlyr Video Component

[![npm](https://img.shields.io/npm/dt/react-plyr.svg)](https://www.npmjs.com/package/react-plyr)
[![npm](https://img.shields.io/npm/v/react-plyr.svg)](https://www.npmjs.com/package/react-plyr)
[![David](https://img.shields.io/david/xDae/react-plyr.svg)](https://david-dm.org/xDae/react-plyr)
[![Travis](https://img.shields.io/travis/xDae/react-plyr.svg)](https://travis-ci.org/xDae/react-plyr)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()

A React video component based on Plyr.

![react-plyr ](screenshot.png "react-plyr")

## Installation

Add `react-plyr` into your package.json dependencies:

```sh
npm install react-plyr --save
```

## Usage

```javascript
import Plyr from 'react-plyr';

// add the component in the render function
render() {
  return (
    <Plyr
      type="youtube"
      videoId="CDFN1VatiJA"
    />
  )
}
```

## Support

Please [open an issue](https://github.com/xDae/react-plyr/issues/new) for support.

## Contributing

Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/xDae/react-plyr/compare/).
npm package: @mhmdaljefri/next-nprogress
Description: An unofficial nextjs wrapper of nprogress package.
Author: @mhmdaljefri
Latest version: 0.2.9

# nextjs-nprogress

An unofficial nextjs wrapper of nprogress package.

## Installing
```sh
npm i @mhmdaljefri/next-nprogress nprogress # yarn add @mhmdaljefri/next-nprogress nprogress
```

## Example

### Adding nprogress default configurations and styles

```jsx
import NextNPregress from "@mhmdaljefri/next-nprogress";
// ... code
<NextNPregress />
// ... code
```

### Adding nprogress with customer configurations and styles


```jsx
import NextNPregress from "@mhmdaljefri/next-nprogress";
// ... code
<NextNPregress
  configurationOptions={{
    stopDelay: 400,
    color: "red",
    showSpinner: false,
  }}
/>
// ... code
```

### Using context to change configurations and styles

```jsx
import NextNPregress, { useUpdateProgressConfig } from "@mhmdaljefri/next-nprogress";
// ... code
return (
  <NextNPregress
    configurationOptions={{
      stopDelay: 400,
      color: "red",
      showSpinner: false,
    }}
  >
    <Component>
  <NextNPregress>
)
// ... code



const Component = () => {
  const updateProgressConfig = useUpdateProgressConfig()

  React.useEffect(() => {
    updateProgressConfig({ color: 'blue' });
  })

  return (
    <div>
      {/* code here */}
    </div>
  )
}
```
npm package: @mhmdaljefri/zod-ar
Description: Arabic message for zod validations
Author: mhmdaljefri
Latest version: 0.0.9

# Zod-AR

**Arabic** translations of **Zod** validations message

## Quick Start
```cli
yarn add zod @mhmdaljefri/zod-ar
```

Inside the application

```jsx
import { arErrorMap } from "@mhmdaljefri/zod-ar";
import * as z from "zod";

// rest of code

z.setErrorMap(arErrorMap);

// rest of you code
```

## License
MIT
npm package: @mhmdbhsk/design-system
Description: An awesome design system for your E-Commerce need.
Author: Muhammad Bhaska
Latest version: 1.0.1

# Warung Design System

An awesome design system for your E-Commerce need.

## Installation

```jsx
yarn add @mhmdbhsk/design-system
```

## Usage

```jsx
import { Button } from '@mhmdbhsk/design-system';
```
npm package: @mhmdhammoud/lightsaildriver
Description: This is a minified version of the [Amazon AWS Lightsail driver](https://www.npmjs.com/package/aws-sdk), Yet it used version 2.x of the AWS SDK.
Author: Mhmdhammoud
Latest version: 2.0.3

# Meritt dev Amazon AWS Lightsail driver

This is a minified version of the [Amazon AWS Lightsail driver](https://www.npmjs.com/package/aws-sdk), Yet it used version 2.x of the AWS SDK.

## Installation

For npm:

```
npm install @mhmdhammoud/lightsaildriver
```

or for yarn:

```
yarn add @mhmdhammoud/lightsaildriver
```

## Usage

```typescript
import {LightsailDriver} from '@mhmdhammoud/lightsaildriver'

const client = new LightsailDriver({accessId, secretKey, region})

// Example of getting all Lightsail instances
const instances = await client.getInstances()
```

## API

### `getInstances()`

Returns a list of all Lightsail instances.

### `getInstance(instanceName: string)`

Returns a Lightsail instance by its name.

### `startInstance(instanceName: string)`

Starts a Lightsail instance by its name.

### `shutDownInstance(instanceName: string)`

Stops a Lightsail instance by its name.

### `rebootInstance(instanceName: string)`

Reboots a Lightsail instance by its name.

### `openInstancePorts(args: LightSailDriver.OpenPortsOptions)`

Opens ports for a Lightsail instance by its name.

### `closeInstancePorts(args: LightSailDriver.ClosePortsOptions)`

Closes ports for a Lightsail instance by its name.

### `editInstancePorts(args: LightSailDriver.PutPortOptions)`

Edits ports for a Lightsail instance by its name.

### `getAllDomains()`

Returns a list of all Lightsail domains.

### `getDomain(domainName: string)`

Returns a Lightsail domain by its name.

### `createDomain(domainName: string)`

Creates a Lightsail domain by its name.

### `deleteDomain(domainName: string)`

Deletes a Lightsail domain by its name.

## License

MIT

## Author

Mohammad Hammoud

## Credits

- [Amazon AWS Lightsail driver](https://www.npmjs.com/package/aws-sdk)

## Contributing

Contributions are welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.

## Changelog

See [CHANGELOG.md](CHANGELOG.md)
npm package: @mhmdtshref/form
Description: React component that help you to create form without using state to get the values
Author: mhmdtshref
Latest version: 1.0.1

# @mhmdtshref/form

> React component that help you to create form without using state to get the values

[![NPM](https://img.shields.io/npm/v/@mhmdtshref/form.svg)](https://www.npmjs.com/package/@mhmdtshref/form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @mhmdtshref/form
```

## Usage

```jsx
import React, { Component } from 'react'

import Form from '@mhmdtshref/form'

class Example extends Component {
  render () {
      const fields = [
        { type: 'text', name: 'username', placeholder: 'Type Username..' },
        { type: 'password', name: 'password', placeholder: 'Type Password..' }
      ];
      const action = (values) => {
        console.log('Field values on submit: ', values);
      }
    return (
      <Form fields={fields} buttonValue="Submit" onSubmitAction{action} />
    )
  }
}
```

## License

MIT © [mhmdtshref](https://github.com/mhmdtshref)
npm package: @mhmmt/react-dotlottie-player
Description: Play Lottie animations in React — supports both .json and .lottie files
Author: Muhammet Andić
Latest version: 0.1.3

# React DotLottie Player

Play Lottie animations in React — supports both `.json` and `.lottie` files.

## Installation

```bash
npm install @mhmmt/react-dotlottie-player
```

## Usage

```tsx
import { DotLottiePlayer } from '@mhmmt/react-dotlottie-player';

function App() {
  return (
    <DotLottiePlayer
      src="/animation.json"
      loop
      autoplay
      speed={1}
      onLoad={() => console.log('Animation loaded')}
      onError={(error) => console.error('Error:', error)}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `src` | `string` | **required** | URL to `.json` or `.lottie` file |
| `loop` | `boolean` | `false` | Loop animation |
| `autoplay` | `boolean` | `true` | Auto-play on load |
| `speed` | `number` | `1` | Playback speed |
| `direction` | `1 \| -1` | `1` | Playback direction |
| `backgroundColor` | `string` | `'transparent'` | Background color |
| `onLoad` | `() => void` | - | Callback when animation loads |
| `onError` | `(error: Error) => void` | - | Callback on error |
| `onComplete` | `() => void` | - | Callback when animation completes |
| `onLoopComplete` | `() => void` | - | Callback when loop completes |
| `onFrame` | `(frame: number) => void` | - | Callback on each frame |

## License

MIT
npm package: @mhmmt/react-wheel-picker
Description: iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
Author: Muhammet Andic
Latest version: 1.0.0

# React Wheel Picker

iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.

- 📱 Natural touch scrolling with smooth inertia effect
- 🖱️ Mouse drag and scroll support for desktop
- 🔄 Infinite loop scrolling
- 🎨 Unstyled components for complete style customization
- ⚡️ Easy installation via shadcn CLI

Check out the live demo: https://react-wheel-picker.chanhdai.com

## Documentation

Please read the [documentation](https://react-wheel-picker.chanhdai.com/docs/getting-started) for setup and API usage.

## Credits

This project is forked from [@mandic/react-wheel-picker](https://github.com/ncdai/react-wheel-picker) by [Nguyen Chanh Dai](https://github.com/ncdai). Special thanks to the original author for creating this awesome React wheel picker component.

## License

Licensed under the [MIT license](./LICENSE).