open-index/open-npm huggingface dataset:
npm package: @rawlinsfeng/react-scripts
Description: Create React App with scripts-version: @rawlinsfeng/react-scripts.
Latest version: 0.1.1

# @rawlinsfeng/react-scripts

The following features have been added based on react-scripts, which includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).
1. `postcss-px-to-viewport`

## Usage
```bash
# npx
npx create-react-app my-app --scripts-version @rawlinsfeng/react-scripts
# yarn
yarn create react-app my-app --scripts-version @rawlinsfeng/react-scripts
# pnpm
pnpm create react-app my-app --scripts-version @rawlinsfeng/react-scripts

# Creating a TypeScript app
# npx
npx create-react-app my-app --scripts-version @rawlinsfeng/react-scripts --template typescript
# yarn
yarn create react-app my-app --scripts-version @rawlinsfeng/react-scripts --template typescript
# pnpm
pnpm create react-app my-app --scripts-version @rawlinsfeng/react-scripts --template typescript
```
npm package: @rawmask/react
Description: React plugin for rawmask.
Author: Dmitry Paskhin
Latest version: 1.0.0

# React plugin for Rawmask

Component and hook for creating masked input in React.

```shell
npm install --save-prod @rawmask/react
```

# Usage

You can use either component `Rawmask` or hook `useRawmask`.

Component:

```tsx
import { Rawmask } from '@rawmask/react';

<Rawmask mask={'+7 (999) 999-99-99'} />
```

Hook:

```tsx
import { FC } from 'react';
import { Rawmask } from '@rawmask/react';

const App: FC = () => {
  const ref = useRawmask('+7 (999) 999-99-99');

  return <input ref={ref} />
};
```

# API

Both component and hook use options from [rawmask](https://github.com/dPaskhin/rawmask#readme) under hood.

### Hook

Hook has the following signature:

```ts
declare const useRawmask: (
  mask: TMask,
  params?: IUseRawmaskParams | undefined
) => RefObject<HTMLInputElement>;
```

### `mask`

Initial mask - string or array of strings/regular expressions. You can change mask dynamically in the runtime.

### `params`

`IRawmaskOptions` from [rawmask](https://github.com/dPaskhin/rawmask#options)

```ts
interface IUseRawmaskParams extends IRawmaskOptions {
  /**
   * Value of input.
   */
  value?: string;
  /**
   * React change event handler.
   *
   * @param value
   * @param event - React change synthetic event.
   */
  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
  /**
   * Raw (unmasked) value of input.
   */
  rawValue?: string;
  /**
   * Change event handler for raw (unmasked) value.
   *
   * @param rawValue
   * @param event - React change synthetic event.
   */
  onChangeRawValue?: (rawValue: string, event: ChangeEvent<HTMLInputElement>) => void;
}
```

Returned `ref` from the hook should be provided to necessary input.

### Component

Component has the following props:

```ts
interface IRawmaskProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'value' | 'onChange'>, IUseRawmaskParams {
  /**
   * Raw mask contains string or array of strings/regular expressions.
   */
  mask: TMask;
}
```

You can use `Rawmask` component like a native input component - almost all props are native beside these:

- `defaultValue` - you can use with just string type
- `value` - like `defaultValue`
- `onChange` - onChange differs from native one by signature - now this callback has two arguments - first is input's
  value, second is "native" React event object

Also, all params from the [hook](https://github.com/dPaskhin/rawmask/tree/master/packages/react-rawmask#Hook) are
available in the props.
npm package: @rawmodel/core
Description: Strongly-typed JavaScript object with support for validation and error handling.
Author: Kristijan Sedlak
Latest version: 3.3.4

> [Rawmodel](https://github.com/rawmodel/framework) core package.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawmodel/handlers
Description: Collection of error handlers for RawModel.
Author: Kristijan Sedlak
Latest version: 3.3.4

> Collection of error handlers for [Rawmodel](https://github.com/rawmodel/.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawmodel/parsers
Description: Collection of data parsers for RawModel.
Author: Kristijan Sedlak
Latest version: 3.3.4

> Collection of data parsers for [Rawmodel](https://github.com/rawmodel/.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawmodel/schema
Description: JSON Schema utils for RawModel.
Author: Kristijan Sedlak
Latest version: 3.3.4

> JSON Schema utils for [Rawmodel](https://github.com/rawmodel/.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawmodel/utils
Description: Helper functions for RawModel.
Author: Kristijan Sedlak
Latest version: 3.3.4

> Helper functions for [Rawmodel](https://github.com/rawmodel/.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawmodel/validators
Description: Collection of validators for RawModel.
Author: Kristijan Sedlak
Latest version: 3.3.4

> Collection of validators for [Rawmodel](https://github.com/rawmodel/.

[Rawmodel](https://github.com/rawmodel/framework) is a strongly-typed JavaScript object with support for validation and error handling. It's a lightweight open source framework for the **server** and **browser** (using module bundler), written with [TypeScript](https://www.typescriptlang.org). It's actively maintained, well tested and already used in production environments. The source code is available on [GitHub](https://github.com/rawmodel/framework) where you can also find our [issue tracker](https://github.com/rawmodel/framework/issues).
npm package: @rawnly/jk
Description: Print specific JSON key
Author: Federico Vitale
Latest version: 0.0.1

# JSON Key Getter
> Easily get json key

## Usage
```sh
	cat package.json | jk version
```

## Installation

#### Binary
Download the latest release and move it into your `$PATH`

#### NPM
```sh
	npm global install jk

	# or

	yarn global add jk
```

## See also
- [ppj](https://github.com/rawnly/ppj)

---
<p align='center'>
Made with a :keyboard: in :it:
</p>
npm package: @rawqing/mdetox
Description: E2E tests and automation for mobile
Author: Tal Kol
Latest version: 12.4.2

# detox

Graybox End-to-End Tests and Automation Library for Mobile

[![NPM Version](https://img.shields.io/npm/v/detox.svg?style=flat)](https://www.npmjs.com/package/detox)
[![Build Status](https://img.shields.io/jenkins/s/http/jenkins-oss.wixpress.com:8080/job/multi-detox-master.svg)](https://jenkins-oss.wixpress.com/job/multi-detox-master/)
[![NPM Downloads](https://img.shields.io/npm/dm/detox.svg?style=flat)](https://www.npmjs.com/package/detox)


For more information go to our [README](https://github.com/wix/detox/blob/master/README.md) or [Read The Docs](https://github.com/wix/detox/tree/master/docs)
npm package: @rawrmaan/react-image-gallery
Description: Image gallery component for React.JS
Author: Xiao Lin
Latest version: 0.6.0

# react-image-gallery

Responsive image gallery, slideshow, carousel

## Install

```sh
npm install react-image-gallery
```

## Demo & Examples

Live demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)

To build the example locally, run:

```
npm install
```
```
gulp dev
```

You might need to run the following command if you do not have gulp installed globally.

```
npm install --global gulp
```

Then open [`localhost:8001`](http://localhost:8001) in a browser.


## Use

### SASS

```
@import "../node_modules/react-image-gallery/src/ImageGallery";
```

### CSS

```
<link rel="stylesheet" href="/image-gallery.css"/>
```

### JS

```js
var ImageGallery = require('react-image-gallery');

var images = [
  {
    original: 'http://lorempixel.com/1000/600/nature/1/',
    thumbnail: 'http://lorempixel.com/250/150/nature/1/',
    originalClass: 'featured-slide',
    thumbnailClass: 'featured-thumb',
    description: 'Optional description...'
  },
  {
    original: 'http://lorempixel.com/1000/600/nature/2/',
    thumbnail: 'http://lorempixel.com/250/150/nature/2/'
  },
  {
    original: 'http://lorempixel.com/1000/600/nature/3/',
    thumbnail: 'http://lorempixel.com/250/150/nature/3/'
  }
];

handleSlide: function(index) {
  console.log('Slid to ' + index);
},

render: function() {
  return (
    <ImageGallery
      items={images}
      autoPlay={true}
      slideInterval={4000}
      onSlide={this.handleSlide}/>
  );
}

```

# Props

* `items`: (required) Array of images,
* `lazyLoad`: Boolean, default `true`
* `showThumbnails`: Boolean, default `true`
* `showNav`: Boolean, default `true`
* `showBullets`: Boolean, default `false`
* `showIndex`: Boolean, default `false`
* `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
* `autoPlay`: Boolean, default `false`
* `slideInterval`: Integer, default `4000`
* `startIndex`: Integer, default `0`
* `onSlide`: Function, `callback(index)`
* `onClick`: Function, `callback(event)`


# functions

* `play()`: continuous plays if image is not hovered.
* `pause()`: pauses the slides.
* `slideToIndex(index)`: slide to a specific index.

# Notes

* Feel free to contribute and or provide feedback!

# License

MIT
npm package: @rawrmaan/react-lazy-load
Description: Simple lazy loading component built with react
Author: Jason Brown
Latest version: 2.0.2

React Lazy Load Component
=========================

Really simple component that renders children elements when they enter the viewport.

[![build status](https://img.shields.io/travis/loktar00/react-lazy-load.svg?style=flat-square)](https://travis-ci.org/loktar00/react-lazy-load)
[![dependency status](https://david-dm.org/loktar00/react-lazy-load.svg?style=flat-square)](https://david-dm.org/loktar00/react-lazy-load)
[![npm downloads](https://img.shields.io/npm/dm/react-lazy-load.svg?style=flat-square)](https://www.npmjs.com/package/react-lazy-load)

## Installation
React Lazy Load requires **React 0.14 or later.**

```
npm install --save react-lazy-load
```

## Examples
* [Basic](https://github.com/loktar00/react-lazy-load/tree/master/examples/basic)

## Usage

```jsx
import React, { Component } from 'react';
import LazyLoad from 'react-lazy-load';

class MyComponent extends Component {
  render() {
    return (
      <LazyLoad>
        <div>some content</div>
      </LazyLoad>
    );
  }
}
```

## Props

### height={String|Number}

This is used to set the elements height even when it contains no content.

```jsx
<LazyLoad height={100}>
  <div>some content</div>
</LazyLoad>
```

### threshold={Number}

By default content is loaded when it appears on the screen. If you want content to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.

```jsx
<LazyLoad threshold={200}>
  <div>some content</div>
</LazyLoad>
```

### onContentVisible={Function}

A callback function to execute when the content appears on the screen.

```jsx
<LazyLoad onContentVisible={() => { console.log('content visible'); }}>
  <div>some content</div>
</LazyLoad>
```
npm package: @rawrs/processor
Description: A set of abstract classes for defining data transformation and a multi-pass processing engine.
Author: wilkie
Latest version: 1.0.9

# @rawrs/processor

This is a TypeScript library that provides a file processing engine that will perform a multiple-pass workflow in order to transform files from one origin type to, ultimately, many different output types.

## Installing and Basic Usage

To install, use npm: (optionally use `--save` as needed to preserve in your `package.json`)

```
npm install @rawrs/processor
```

Then, you can import it as seen in any of the examples in `examples/` or, simply, as follows:

```javascript
import Processor from "@rawrs/processor";
```

Look at the `examples/` directory in the repository for further examples.

## Development

Clone this repository and within it install the dependencies:

```shell
npm install
```

You can build with:

```
npm run build
```

And perform a linter run via:

```
npm run lint
```

## Examples

To run an example in the `examples/` path, just invoke `npx vite-node` directly or use the npm run command as so:

```shell
npm run example simple.ts
```

or

```shell
npx vite-node examples/simple.ts
```