open-index/open-npm huggingface dataset:
npm package: @mr-m/player
Description: A comprehensive, feature-rich video player component for React with subtitle support, fullscreen, PiP, and more.
Author: Mr-M
Latest version: 1.1.0

# @mr-m/player

مشغل فيديو متقدم ومتكامل لمشاريع React، يدعم الترجمات، الشاشة الكاملة، وضع الصورة داخل الصورة، والعديد من الميزات الأخرى.

## ✨ الميزات

**واجهة مستخدم غنية:**
- ▶️ تحكم تشغيل/إيقاف مع تأثيرات سلسة
- 🔊 تحكم في الصوت مع كتم/إلغاء كتم
- 📺 دعم الشاشة الكاملة مع قفل الاتجاه الأفقي
- 🖼️ وضع الصورة داخل الصورة (PiP)
- 📝 دعم ترجمات SRT مع تحليل تلقائي
- ⏩ تخطي للأمام/الخلف (10 ثواني)
- 📊 شريط التقدم مع إمكانية البحث
- ⬇️ تحميل الفيديو
- 🔒 دعم Wake Lock API (يمنع نوم الشاشة أثناء التشغيل)
- 📱 تصميم متجاوب يدعم الجوال
- 🎨 واجهة جميلة باستخدام Tailwind CSS
- ⌨️ دعم اختصارات لوحة المفاتيح
- 🎯 النقر المزدوج للشاشة الكاملة
- 🎭 إخفاء تلقائي للعناصر أثناء التشغيل

## 📦 التثبيت

```bash
npm install @mr-m/player
npm package: @mr-mahabeer/react-photo-cropper
Description: Browser-only React image cropper with typed crop utilities and canvas export helpers.
Latest version: 0.1.1

# @mr-mahabeer/react-photo-cropper

Browser-only React image cropper with drag, zoom, circular or rectangular crop overlays, and a typed canvas export helper.

## Install

```bash
npm install @mr-mahabeer/react-photo-cropper
```

## Usage

```tsx
import { ImageCropper } from "@mr-mahabeer/react-photo-cropper";
import "@mr-mahabeer/react-photo-cropper/styles.css";

function AvatarCropper() {
  return (
    <ImageCropper
      src="/images/profile.jpg"
      shape="circle"
      cropWidth={320}
      crossOrigin="anonymous"
      onSave={(result) => {
        console.log(result.blob, result.url);
      }}
      onError={(error) => {
        console.error(error.message);
      }}
    />
  );
}
```

## Core Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `src` | `string` | required | Image URL or data URL |
| `shape` | `"circle" \| "rect"` | `"circle"` | Crop overlay shape |
| `cropWidth` | `number` | `320` | Viewport width in pixels |
| `cropHeight` | `number` | derived | Explicit viewport height |
| `aspect` | `number` | unset | Used when `cropHeight` is not provided |
| `minZoom` | `number` | `1` | Lower zoom bound |
| `maxZoom` | `number` | `3` | Upper zoom bound |
| `zoomStep` | `number` | `0.1` | Slider/button zoom increment |
| `showControls` | `boolean` | `true` | Toggles built-in toolbar |
| `crossOrigin` | `"anonymous" \| "use-credentials"` | unset | Required for exporting remote images via canvas |
| `output` | `CropOutputOptions` | unset | Export size, mime type, quality |
| `onChange` | `(state) => void` | unset | Called whenever crop state changes |
| `onComplete` | `(state) => void` | unset | Called with the resolved crop state |
| `onError` | `(error) => void` | unset | Receives export/load errors such as tainted canvas failures |
| `onSave` | `(result, state) => void` | unset | Invoked by the built-in save button |

## Export Helper

```ts
import { getCroppedImage } from "@mr-mahabeer/react-photo-cropper";

const result = await getCroppedImage({
  image: htmlImageElement,
  crop: { x: 120, y: 40, width: 320, height: 320 },
  shape: "circle",
  type: "image/png"
});
```

## Cross-Origin Images

If your image comes from another domain, canvas export will fail unless that image is served with valid CORS headers.

Use:

```tsx
<ImageCropper
  src="https://cdn.example.com/avatar.jpg"
  crossOrigin="anonymous"
  onError={(error) => {
    console.error(error.message);
  }}
/>
```

Requirements:
- the image server must return `Access-Control-Allow-Origin`
- `crossOrigin="anonymous"` must be set before the image is fetched
- if the remote server does not allow CORS, browser-side cropping preview may still work but export via `toBlob()` will fail

## Publish Checklist

```bash
npm run lint
npm run test
npm run build
npm run pack:check
```

After that:

```bash
npm login
npm publish --access public
```
npm package: @mr-moto/react-snippet-generator
Description: RSG is a CLI tool that generates boilerplate react components.
Latest version: 1.1.2-beta

# React Snippet Generator (RSG)
RSG is a CLI tool that generates boilerplate react components.


## Install
```sh
npm i -D @mr-moto/react-snippet-generator
yarn -D @mr-moto/react-snippet-generator
pnpm i -D @mr-moto/react-snippet-generator
```

## Config
Include a .rsgrc ( or another cosmiconfig format file ) at the root of your project directory. 

You can set a custom path for the generated components in this file

```sh
{
  components: {
    path: 'src/custom_path_here'
  },
  pages: {
    path: 'src/custom_path_here'
  }
}
```


## Usage
```sh
npx rsg [command] <name>
```


### Examples
```sh
npx rsg component button
npx rsg page AboutUs
npx rsg c input -t
```


### Commands


#### `component` (`c`)
creates a react component in the src/components directory
```sh
npx rsg component <name> [options]
npx rsg c <name> [options]
```


##### arguments
| argument | required | description |
| -------- | -------- | ----------- |
| `<name>` | yes      | name of the component. RSG will automatically capitalize the first letter |


##### options
| option | alias | required | description |
| ------ | ----- | -------- | ----------- |
| `--ts` | `-t`  | no       | generates a react ts component |


#### `page` (`p`)
creates a react component in the src/page directory
```sh
npx rsg page <name> [options]
npx rsg p <name> [options]
```



##### arguments
| argument | required | description |
| -------- | -------- | ----------- |
| `<name>` | yes      | name of the component. RSG will automatically capitalize the first letter |


##### options
| option | alias | required | description |
| ------ | ----- | -------- | ----------- |
| `--ts` | `-t`  | no       | generates a react ts component |
npm package: @mr-scroll/angular
Description: The best custom scroll for the web. This is the angular wrapper.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/angular

[![npm](https://img.shields.io/npm/v/@mr-scroll/angular.svg)](https://www.npmjs.com/package/@mr-scroll/angular)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the angular wrapper. [Check here](../../README.md) (root of this repo) for an overview on mr-scroll.

## Install

```
npm i @mr-scroll/core @mr-scroll/angular
```

Angular 10 and above is supported.

Note: If you're using [css-theming](https://github.com/mrahhal/css-theming), check the [css-theming support package](../css-theming).

## Usage

Import the global CSS styles in your `angular.json`, in projects>angular>architect>build>options>styles:
```json
"styles": [
  "node_modules/@mr-scroll/core/dist/styles.css",
  //...
]
```

[Example from sample here.](https://github.com/mrahhal/mr-scroll/blob/0780d36414c7032a5853daa53ec390cc9427537c/samples/angular/angular.json#L34)

Import `ScrollModule` into your module.

[Example from sample here.](https://github.com/mrahhal/mr-scroll/blob/0780d36414c7032a5853daa53ec390cc9427537c/samples/angular/src/app/app.module.ts#L19)

Use `mr-scroll` component:
```html
<mr-scroll>
  Content
</mr-scroll>
```

> For more general usage info check the [README](../../README.md) in the root of this repo.

**NOTE:** The `scrolled` event is the only event that won't trigger change detection. This is by design as it's fired a lot. If you need change detection when you react to it, you can do this easily by using `NgZone`:
```ts
// Inject NgZone in your component.
constructor(private _zone: NgZone) { }

_onScrolled() {
  _zone.Run(() => {
    // Handle the event.
  });
}
```
npm package: @mr-scroll/core
Description: The best custom scroll for the web. This is the core package.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/core

[![npm](https://img.shields.io/npm/v/@mr-scroll/core.svg)](https://www.npmjs.com/package/@mr-scroll/core)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the core package. [Check here](../../README.md) for a general usage guide.

## Implementation

> NOTE: If you're using a framework we have a wrapper for then you don't need this. [Check here](../../README.md#packages) to see which ones we support.

@mr-scroll/core has the core logic to make an mr-scroll custom scrollbar.

Implementing @mr-scroll/core in a framework is simple. You'll wrap the `Scroll` class inside a component (or something similar).

The `Scroll` constructor takes 3 arguments:
- Host element: The html element that will act as the host. Required.
- Content element: The html element that will contain the actual contents. Required.
- A config object

So this requires you to provide the host and content elements. Usually, you'll have this html template:
```html
<div> <!-- host element -->
  <div> <!-- content element -->
    CONTENT <!-- transcluded content -->
  </div>
</div>
```

Use whatever is the idiomatic approach in your framework to do this.

And then in your wrapper component:
```ts
import { Scroll } from '@mr-scroll/core';

// Inside the wrapper

// You'll want to store the reference to the scroll.
this.scroll = new Scroll(hostElement, contentElement, /* config: fill from your inputs */ { ... });

// Delegate events in a way that makes sense in your framework.
// For example, in angular, we add EventEmitters that delegate the inner events of Scroll.

// Initialize whenever is the right time to do so in your framework.
this.scroll.initialize();

// And don't forget to destroy it when your component is being destroyed.
this.scroll.destroy();
```

This package also provides the main CSS styles to be imported in your app. You can find the bundled styles at "@mr-scroll/core/dist/styles.css".

Check our [angular wrapper](../angular) for an implementation example of all of this for Angular.
npm package: @mr-scroll/css-theming
Description: The best custom scroll for the web. This is the css-theming support package.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/css-theming

[![npm](https://img.shields.io/npm/v/@mr-scroll/css-theming.svg)](https://www.npmjs.com/package/@mr-scroll/css-theming)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the [css-theming](https://github.com/mrahhal/css-theming) support package. [Check here](../../README.md) (root of this repo) for an overview on mr-scroll.

This package styles the scroll (thumb, etc) according to the active theme when using [css-theming](https://github.com/mrahhal/css-theming).

## Install

Assuming we're using angular (if not, install the respective wrapper package instead of @mr-scroll/angular):
```
npm i @mr-scroll/core @mr-scroll/angular @mr-scroll/css-theming
```

## Usage

You only need to import the SCSS file that this package includes in your global SCSS file, and call the mixin it provides:
```scss
// For example, in styles.scss

// From css-theming
@import 'css-theming/src/scss/css-theming';
// From @mr-scroll/css-theming
@import '@mr-scroll/css-theming/src/scss/css-theming';

// You can optionally provide values here.
@include msct-apply();
```

If you're using the SCSS module system instead:
```scss
// For example, in styles.scss

// From css-theming
@use 'css-theming/src/scss/css-theming';
// From @mr-scroll/css-theming
@use '@mr-scroll/css-theming/src/scss/css-theming' as msct;

// You can optionally provide values here.
@include msct.apply();
```

[Example from sample here.](https://github.com/mrahhal/mr-scroll/blob/0780d36414c7032a5853daa53ec390cc9427537c/samples/angular/src/styles.scss#L3-L7)

That's it. If you have css-theming set up properly, you'll see that the scroll's thumb changes colors as the user switches between light and dark themes.
npm package: @mr-scroll/react
Description: The best custom scroll for the web. This is the react wrapper.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/angular

[![npm](https://img.shields.io/npm/v/@mr-scroll/react.svg)](https://www.npmjs.com/package/@mr-scroll/react)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the react wrapper. [Check here](../../README.md) (root of this repo) for an overview on mr-scroll.

## Install

```
npm i @mr-scroll/core @mr-scroll/react
```

React 16 and above is supported.

Note: If you're using [css-theming](https://github.com/mrahhal/css-theming), check the [css-theming support package](../css-theming).

## Usage

Import the global CSS styles (for example in App.css):
```css
@import '@mr-scroll/core/dist/styles.css';
```

```tsx
import React, { Component } from 'react';
import Scroll from '@mr-scroll/react';

class Example extends Component {
  render() {
    return (
      <Scroll>
        Content
      </Scroll>
    );
  }
}
```

> For more general usage info check the [README](../../README.md) in the root of this repo.
npm package: @mr-scroll/vue
Description: The best custom scroll for the web. This is the vue wrapper.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/vue

[![npm](https://img.shields.io/npm/v/@mr-scroll/react.svg)](https://www.npmjs.com/package/@mr-scroll/react)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the vue wrapper. [Check here](../../README.md) (root of this repo) for an overview on mr-scroll.

## Install

```
npm i @mr-scroll/core @mr-scroll/vue
```

Note: If you're using [css-theming](https://github.com/mrahhal/css-theming), check the [css-theming support package](../css-theming).

## Usage

Register as a global component:
```js
import { createApp } from 'vue';
import Scroll from '@mr-scroll/vue';

const app = createApp(..options);
app.use(Scroll);
```

Register as a local component:
```js
import Scroll from '@mr-scroll/vue';

export default {
  name: 'MyComponent',
  components: {
    'mr-scroll': Scroll,
  },
};
```

Import the global CSS styles (for example in your App.vue):
```vue
<style src='@mr-scroll/core/dist/styles.css'></style>
```

Use `mr-scroll` component:
```html
<mr-scroll>
  Content
</mr-scroll>
```

> For more general usage info check the [README](../../README.md) in the root of this repo.
npm package: @mr-scroll/vue2
Description: The best custom scroll for the web. This is the vue 2 wrapper.
Author: Mohammad Rahhal
Latest version: 1.2.0

# @mr-scroll/vue2

[![npm](https://img.shields.io/npm/v/@mr-scroll/react.svg)](https://www.npmjs.com/package/@mr-scroll/react)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The best custom scroll for the web.

This is the vue 2 wrapper. [Check here](../../README.md) (root of this repo) for an overview on mr-scroll.

## Install

```
npm i @mr-scroll/core @mr-scroll/vue2
```

Note: If you're using [css-theming](https://github.com/mrahhal/css-theming), check the [css-theming support package](../css-theming).

## Usage

Register as a global component:
```js
import { createApp } from 'vue';
import Scroll from '@mr-scroll/vue2';

const app = createApp(..options);
app.use(Scroll);
```

Register as a local component:
```js
import Scroll from '@mr-scroll/vue2';

export default {
  name: 'MyComponent',
  components: {
    'mr-scroll': Scroll,
  },
};
```

Import the global CSS styles (for example in your App.vue):
```vue
<style src='@mr-scroll/core/dist/styles.css'></style>
```

Use `mr-scroll` component:
```html
<mr-scroll>
  Content
</mr-scroll>
```

> For more general usage info check the [README](../../README.md) in the root of this repo.