open-index/open-npm huggingface dataset:
npm package: @react-av/controls
Description: Easy to use media control elements for use with React AV.
Author: Daniel Wykerd
Latest version: 0.0.7

# React AV Controls

This package contains the controls components for React AV.

## Installation

```bash
npm i @react-av/core @react-av/controls
yarn add @react-av/core @react-av/controls
pnpm i @react-av/core @react-av/controls
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/core
Description: Fully-featured, headless, hooks-based, and declarative media player framework for React.
Author: Daniel Wykerd
Latest version: 0.0.5

# React AV Core

This package contains the core components of React AV.

## Installation

```bash
npm i @react-av/core
yarn add @react-av/core
pnpm i @react-av/core
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/editor
Description: Editor Timeline Components built on React AV.
Author: Daniel Wykerd
Latest version: 0.0.2

# React AV Controls

This package contains the editor timeline components built on React AV.

## Installation

```bash
npm i @react-av/core @react-av/vtt @react-av/vtt-core @react-av/controls @react-av/editor
yarn add @react-av/core @react-av/vtt @react-av/vtt-core @react-av/controls @react-av/editor
pnpm i @react-av/core @react-av/vtt @react-av/vtt-core @react-av/controls @react-av/editor
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/hls
Description: HLS media elements for React AV.
Author: Daniel Wykerd
Latest version: 0.0.4

# React AV HLS

This package contains HLS media components for React AV.

## Installation

```bash
npm i @react-av/core @react-av/hls
yarn add @react-av/core @react-av/hls
pnpm i @react-av/core @react-av/hls
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/shaka
Description: Shaka media elements for React AV to play DASH and HLS content.
Author: Daniel Wykerd
Latest version: 0.0.6

# React AV Shaka

This package contains Shaka media components for React AV, allowing playback of DASH and HLS content.

## Installation

```bash
npm i @react-av/core @react-av/shaka shaka-player
yarn add @react-av/core @react-av/shaka shaka-player
pnpm i @react-av/core @react-av/shaka shaka-player
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/sliders
Description: Media control sliders built on top of Radix UI for use with React AV.
Author: Daniel Wykerd
Latest version: 0.0.6

# React AV Sliders

This package contains progress and volume slider components based of Radix UI's slider component for use with React AV.

## Installation

```bash
npm i @react-av/core @radix-ui/react-slider @react-av/sliders
yarn add @react-av/core @radix-ui/react-slider @react-av/sliders
pnpm i @react-av/core @radix-ui/react-slider @react-av/sliders
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/vtt
Description: WebVTT support for React AV.
Author: Daniel Wykerd
Latest version: 0.0.10

# React AV WebVTT

This package adds WebVTT support to React AV.

## Installation

```bash
npm i @react-av/core @react-av/vtt-core @react-av/vtt
yarn add @react-av/core @react-av/vtt-core @react-av/vtt
pnpm i @react-av/core @react-av/vtt-core @react-av/vtt
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/vtt-controls
Description: WebVTT controls for use with React AV.
Author: Daniel Wykerd
Latest version: 0.0.10

# React AV WebVTT Controls

This package adds components for use with the WebVTT module of React AV.

## Installation

```bash
npm i @react-av/core @react-av/vtt-core @react-av/vtt @react-av/vtt-controls
yarn add @react-av/core @react-av/vtt-core @react-av/vtt @react-av/vtt-controls
pnpm i @react-av/core @react-av/vtt-core @react-av/vtt @react-av/vtt-controls
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-av/vtt-core
Description: W3C specification compliant WebVTT implementation.
Author: Daniel Wykerd
Latest version: 0.0.8

# React AV WebVTT Implementation

A compliant, standalone browser implementation of W3C WebVTT specification.

## Installation

```bash
npm i @react-av/vtt-core
yarn add @react-av/vtt-core
pnpm i @react-av/vtt-core
```

## Usage

See the [documentation](https://react-av.wykerd.dev) for more information.
npm package: @react-awesome-query-builder/antd
Description: User-friendly query builder for React. AntDesign widgets
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/antd

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/antd.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/antd)

This packages provides [Ant Design](https://ant.design/) widgets.

## Installation

Peer dependencies that needs to be installed:
```
npm i antd @ant-design/icons --save
```

Install:
```
npm i @react-awesome-query-builder/antd --save
```

## Usage

Use `AntdConfig`. 
Only for antd v4 - please import `antd/dist/antd.css`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage) with modifications at top:
```js
// >>>
import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/antd'; // for TS example
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/antd';
import { AntdConfig, AntdWidgets } from '@react-awesome-query-builder/antd';
//import "antd/dist/antd.css"; // only for v4
import '@react-awesome-query-builder/antd/css/styles.css';
const InitialConfig = AntdConfig;
// <<<
```
npm package: @react-awesome-query-builder/bootstrap
Description: User-friendly query builder for React. Bootstrap widgets
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/bootstrap

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/bootstrap.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/bootstrap)

This packages provides [Bootstrap](https://reactstrap.github.io/) widgets

## Installation

Peer dependencies that needs to be installed:
```
npm i bootstrap reactstrap @popperjs/core @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
```

Install:
```
npm i @react-awesome-query-builder/bootstrap --save
```

## Usage

Use `BootstrapConfig`. 
Don't forget to import Bootstrap CSS: `bootstrap/dist/css/bootstrap.min.css`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage) with modifications at top:
```js
// >>>
import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/bootstrap'; // for TS example
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/bootstrap';
import { BootstrapConfig, BootstrapWidgets } from '@react-awesome-query-builder/bootstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import '@react-awesome-query-builder/bootstrap/css/styles.css';
const InitialConfig = BootstrapConfig;
// <<<
```
npm package: @react-awesome-query-builder/core
Description: User-friendly query builder for React. Core
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/core

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/core.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/core)

This package has core functionality to import/export/store query, provides utils and core config. 
Can be used on server-side, does not require React.

## Installation

```
npm i @react-awesome-query-builder/core --save
```

## Usage

```js
import {
  CoreConfig, Utils,
  // types
  TreeStore, TreeState, TreeActions, InputAction, JsonTree
} from '@react-awesome-query-builder/core';

// config
const config = {
  ...CoreConfig,
  fields: {
    name: {
      label: 'Name',
      type: 'text',
    },
    age: {
      label: 'Age',
      type: 'number',
    }
  }
};

// load from JSON
const initialTree = Utils.loadTree({
  id: '00001',
  type: 'group',
  children1: [
    {
      id: '00002',
      type: 'rule',
      properties: {
        field: 'age',
        operator: 'greater_or_equal',
        value: [18],
        valueSrc: ['value']
      }
    }
  ]
});
// or import from jsonLogic
// const initialTree = Utils.loadFromJsonLogic({
//   'and': [
//     {
//       '<=': [
//         {var: 'age'},
//         18
//       ]
//     }
//   ]
// }, config);

// create store to manipulate tree on backend
const reducer = TreeStore(config);
let state: TreeState = reducer({tree: initialTree});

// add rule `name == 'denis'`
const rootPath = [ state.tree.get('id') as string ];
const action = TreeActions.tree.addRule(config, rootPath, {
  field: 'name',
  operator: 'equal',
  value: ['denis'],
  valueSrc: ['value'],
  valueType: ['text']
});
state = reducer(state, action);

// export
const tree = Utils.getTree(state.tree);
const { logic } = Utils.jsonLogicFormat(state.tree, config);
const sql = Utils.sqlFormat(state.tree, config);
const spel = Utils.sqlFormat(state.tree, config);
const mongo = Utils.mongodbFormat(state.tree, config);
const elastic = Utils.elasticSearchFormat(state.tree, config);
console.log({ tree, logic, sql, spel, mongo, elastic });

```
npm package: @react-awesome-query-builder/examples
Description: Local hot-reloadable demo for @react-awesome-query-builder
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/examples

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/examples.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/examples)

Demo app, uses local library with hot reload.  
You can switch between AntDesign, MUI, Bootstrap and vanilla widgets.  
Uses complex config to demonstrate anvanced usage.  
**Uses TypeScript.**

### Preview

Demo: https://ukrbublik.github.io/react-awesome-query-builder/

Demo for ternary mode: https://ukrbublik.github.io/react-awesome-query-builder/#/switch

### Run

From the root of cloned repository:
```sh
pnpm start
```

And open `http://localhost:3001` in a browser.  
For ternary mode open `http://localhost:3001/#/switch`  

Feel free to play with code in [`demo`](demo) (advanced demo) and [`demo_switch`](demo_switch) (demo for ternary mode) dirs.  


### Run in sandbox
[![Open in codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ukrbublik/react-awesome-query-builder/tree/master/packages/examples?file=/demo/index.tsx)
(if it freezes on "Initializing Sandbox Container" please click "Fork")

[![Open in stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ukrbublik/react-awesome-query-builder/tree/master?file=packages%examples%2Fdemo%2Findex.tsx)
(installing dependencies can take a while)
npm package: @react-awesome-query-builder/fluent
Description: User-friendly query builder for React. Fluent 8 widgets
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/fluent

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/fluent.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/fluent)

This packages provides [Fluent UI v8](https://developer.microsoft.com/en-us/fluentui#/get-started/web) widgets

## Installation

Peer dependencies that needs to be installed:
```
npm i @fluentui/react @fluentui/react-icons @fluentui/font-icons-mdl2 --save
```

Install:
```
npm i @react-awesome-query-builder/fluent --save
```

## Usage

Use `FluentUIConfig`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage) with modifications at top:
```js
// >>>
import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/fluent'; // for TS example
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/fluent';
import { FluentUIConfig, FluentUIWidgets } from '@react-awesome-query-builder/fluent';
import '@react-awesome-query-builder/fluent/css/styles.css';
const InitialConfig = FluentUIConfig;
// <<<
```
npm package: @react-awesome-query-builder/material
Description: User-friendly query builder for React. Material-UI 4 widgets
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/material

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/material.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/material)

This packages provides [Material-UI v4](https://v4.mui.com/) widgets (deprecated)

## Installation

Peer dependencies that needs to be installed:
```
npm i @material-ui/core @material-ui/lab @material-ui/icons @material-ui/pickers --save
```

Install:
```
npm i @react-awesome-query-builder/material --save
```

## Usage

Use `MaterialConfig`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage) with modifications at top:
```js
// >>>
import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/material'; // for TS example
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/material';
import { MaterialConfig, MaterialWidgets } from '@react-awesome-query-builder/material';
import '@react-awesome-query-builder/material/css/styles.css';
const InitialConfig = MaterialConfig;
// <<<
```
npm package: @react-awesome-query-builder/mui
Description: User-friendly query builder for React. MUI 5 widgets
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/mui

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/mui.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/mui)

This packages provides [MUI](https://mui.com/) widgets

## Installation

Peer dependencies that needs to be installed:
```
npm i @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-date-pickers @mui/base --save
```

Install:
```
npm i @react-awesome-query-builder/mui --save
```

## Usage

Use `MuiConfig`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage) with modifications at top:
```js
// >>>
import type { JsonGroup, Config, ImmutableTree, BuilderProps } from '@react-awesome-query-builder/mui'; // for TS example
import { Query, Builder, Utils as QbUtils } from '@react-awesome-query-builder/mui';
import { MuiConfig, MuiWidgets } from '@react-awesome-query-builder/mui';
import '@react-awesome-query-builder/mui/css/styles.css';
const InitialConfig = MuiConfig;
// <<<
```
npm package: @react-awesome-query-builder/sql
Description: User-friendly query builder for React. SQL support
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/sql

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/sql.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/sql)

This packages provides import from SQL using [node-sql-parser](https://www.npmjs.com/package/node-sql-parser)

## Installation

Install:

```sh
npm i @react-awesome-query-builder/sql --save
```

## Usage

```js
import { Utils } from '@react-awesome-query-builder/core';
import { SqlUtils } from "@react-awesome-query-builder/sql";

const importFromSql = (sqlStr) => {
  const {tree, errors: sqlErrors, warnings: sqlWarnings} = SqlUtils.loadFromSql(sqlStr, state.config);
  if (sqlErrors.length) {
    console.log("Import errors: ", sqlErrors);
  }
  const {fixedTree} = Utils.sanitizeTree(tree, state.config);
  setState({
    ...state, 
    tree: fixedTree,
  });
};
```
npm package: @react-awesome-query-builder/ui
Description: User-friendly query builder for React. Core React UI
Author: Denis Oblogin
Latest version: 6.7.0-alpha.0

# @react-awesome-query-builder/ui

[![npm](https://img.shields.io/npm/v/@react-awesome-query-builder/ui.svg)](https://www.npmjs.com/package/@react-awesome-query-builder/ui)

This package has core React components like `<Query>` `<Builder>` and CSS, provides config with basic (vanilla) widgets.

## Installation

```
npm i @react-awesome-query-builder/ui --save
```

## Usage

Use `BasicConfig`. 

See [minimal example in readme](https://github.com/ukrbublik/react-awesome-query-builder#usage)
npm package: @react-awesome/autosizer
Description: Autosizer keeps tracking the parent size and report back to  its children.
Latest version: 0.0.0

# @react-awesome/autosizer

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fautosizer" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=autosizer" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/autosizer" />
</p>

**autosizer** tracks the previous value of a variable.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/autosizer) for more information.

## Installation

```sh
yarn add @react-awesome/autosizer
# or
npm i @react-awesome/autosizer
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/components
Description: React Awesome Components is a collection of modern, reusable and well-tested React components that can be utilized across all of our different applications.
Latest version: 1.0.24

<p align="center">
  <a href="https://github.com/trinhthinh388/react-awesome-components">
    <img src="http://react-awesome-components.vercel.app/logo.svg" alt="sunglasses" width="128" />
  </a>
</p>

<h1 align="center">React Awesome Components. 😎</h1>

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fcomponents" />
</p>

React Awesome Components is a collection of modern, reusable and well-tested React components that can be utilized across all of our different applications.

Please refer to the [documentation](https://react-awesome-components.vercel.app) for more information.

## Installation

```sh
yarn add @react-awesome/components
# or
npm i @react-awesome/components
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/hooks
Description: A collection of useful and awesome hooks.
Latest version: 0.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @react-awesome/hooks

A collection of useful and awesome hooks.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/hooks) for more information.

## Installation

```sh
yarn add @react-awesome/hooks
# or
npm i @react-awesome/hooks
```

## Hooks

- [usePrevious](https://react-awesome-components.vercel.app/docs/use-previous)

  usePrevious is a hook track the previous value of a variable.

- [useSelectionRange](https://react-awesome-components.vercel.app/docs/use-selection-range)

  useSelectionRange tracks the input selection range.

- [usePreserveInputCaretPosition](https://react-awesome-components.vercel.app/docs/use-preserve-input-caret-position)

  usePreserveInputCaretPosition tracks the input caret position and place it at the correct position so user can have a natural typing experience.

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/phone-input
Description: PhoneInput is a customize input component that can parse and validate phone number.
Latest version: 1.1.7

# @react-awesome/phone-input

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fphone-input" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=PhoneInput" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/phone-input" />
</p>

PhoneInput is a customize input component that can parse and validate phone number.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/phone-input) for more information.

## Installation

```sh
yarn add @react-awesome/phone-input
# or
npm i @react-awesome/phone-input
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-breakpoint
Description: useBreakpoint triggers callback when a container's size is equal to one specific breakpoint.
Latest version: 1.0.0

# @react-awesome/use-breakpoint

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-breakpoint" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useBreakpoint" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-breakpoint" />
</p>

**useBreakpoint** returns the current breakpoint of a element, contains useful utilities to work with user-defined breakpoints and automatically triggers
callback when the element's size is equal to a specific breakpoint.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-breakpoint) for more information.

## Installation

```sh
yarn add @react-awesome/use-breakpoint
# or
npm i @react-awesome/use-breakpoint
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-click-outside
Description: useClickOutside triggers callback when user clicks on the outside area of an element.
Latest version: 0.0.3

# @react-awesome/use-click-outside

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-click-outside" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useClickOutside" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-click-outside" />
</p>

**useClickOutside** triggers callback when user clicks on the outside area of an element.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-click-outside) for more information.

## Installation

```sh
yarn add @react-awesome/use-click-outside
# or
npm i @react-awesome/use-click-outside
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-debounce
Description: useDebounce debounces the state value.
Latest version: 1.0.0

# @react-awesome/use-debounce

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-debounce" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=use-debounce" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-debounce" />
</p>

**use-debounce** tracks the previous value of a variable.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-debounce) for more information.

## Installation

```sh
yarn add @react-awesome/use-debounce
# or
npm i @react-awesome/use-debounce
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-preserve-input-caret-position
Description: usePreserveInputCaretPosition tracks the input caret position and place it at the correct position so user can have a natural typing experience.
Latest version: 0.0.3

# @react-awesome/use-preserve-input-caret-position

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-preserve-input-caret-position" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=usePreserveInputCaretPosition" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-preserve-input-caret-position" />
</p>

**usePreserveInputCaretPosition** tracks the input caret position and place it at the correct position so user can have a natural typing experience.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-preserve-input-caret-position) for more information.

## Installation

```sh
yarn add @react-awesome/use-preserve-input-caret-position
# or
npm i @react-awesome/use-preserve-input-caret-position
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-previous
Description: usePrevious tracks the previous value of a variable.
Latest version: 0.0.3

# @react-awesome/use-previous

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-previous" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=usePrevious" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-previous" />
</p>

**usePrevious** tracks the previous value of a variable.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-previous) for more information.

## Installation

```sh
yarn add @react-awesome/use-previous
# or
npm i @react-awesome/use-previous
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-selection-range
Description: useSelectionRange tracks the input selection range.
Latest version: 0.0.3

# @react-awesome/use-selection-range

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-selection-range" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useSelectionRange" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-selection-range" />
</p>

**useSelectionRange** tracks the input selection range.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-selection-range) for more information.

## Installation

```sh
yarn add @react-awesome/use-selection-range
# or
npm i @react-awesome/use-selection-range
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-awesome/use-toggle
Description: useToggle toggles the boolean value with ease.
Latest version: 1.0.0

# @react-awesome/use-toggle

<p align="center">
  <img alt="version" src="https://img.shields.io/npm/v/%40react-awesome%2Fuse-toggle" />
  <img alt="coverage" src="https://img.shields.io/codecov/c/github/trinhthinh388/react-awesome-components/master?token=VQ8VJ7OECQ&flag=useToggle" />
  <img alt="license" src="https://img.shields.io/github/license/trinhthinh388/react-awesome-components" />
  <img alt="build status" src="https://img.shields.io/github/actions/workflow/status/trinhthinh388/react-awesome-components/release.yml" />
  <img alt="size" src="https://img.shields.io/bundlejs/size/%40react-awesome/use-toggle" />
</p>

**useToggle** tracks the previous value of a variable.

Please refer to the [documentation](https://react-awesome-components.vercel.app/docs/use-toggle) for more information.

## Installation

```sh
yarn add @react-awesome/use-toggle
# or
npm i @react-awesome/use-toggle
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/trinhthinh388/react-awesome-components/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/trinhthinh388/react-awesome-components/blob/master/LICENSE).
npm package: @react-barcode-scanner/components
Description: A component (and perhaps later multiple components) which use the [@react-barcode-scanner/hooks](https://github.com/react-barcode-scanner/hooks) hooks to drive a webcam  barcode scanner component.
Latest version: 0.0.77

# @react-barcode-scanner/components

A component (and perhaps later multiple components) which use the [@react-barcode-scanner/hooks](https://github.com/react-barcode-scanner/hooks) hooks to drive a webcam 
barcode scanner component.

Storybook stories for the repo are viewable at https://react-barcode-scanner.github.io/components
npm package: @react-barcode-scanner/hooks
Description: A set of React hooks for using a webcam as a barcode scanner.
Latest version: 0.0.74

# @react-barcode-scanner/hooks

A set of React hooks for using a webcam as a barcode scanner.

Created as part of a project for making a UPC reader for board games, the
scanner is not 100% reliable with modern smartphones. The presence of multiple
cameras and the inability to easily choose the correct camera forces several
compromises.

## Barcode Detection

The built-in `BarcodeDetector` API is used when available. When it is not
available, the `@undecaf/barcode-detector-polyfill` is used instead.

## Usage

Reference the Storybook stories
([demo site](https://react-barcode-scanner.github.io/hooks))
for an example of implementation, as well as the companion package
[`@react-barcode-scanner/components`](https://github.com/react-barcode-scanner/components).

## API

The primary hook `useBarcodeScanner` should have a relatively self-documenting
API, but here are the available options:

- `zoom`: an integer providing the amount of zoom to apply, defaults to `1`
- `onDevices`: a callback function to execute when the list of devices is
  available. This can be useful if you want to allow the user to select a device
- `onScan`: a callback function to execute when the scanner detects a barcode.
  Will contain the logic to interface with your code.
- `shouldPlay`: determines whether or not the video element will automatically
  begin playing after permission to use the camera is granted. When set to false
  you will need to manually start the scanner's video element playing. Defaults
  to `true`.

There are many lower level hooks used by the primary hook which can also
be explored separately.
npm package: @react-basis/core
Description: This library contains core react components like button, input ... with the help of style-components, typescript & babel 7. You can also checkout the components [here](http://mukulbansal.com/react-basis)
Latest version: 1.0.7

# React Core Components

This library contains core react components like button, input ... with the help of style-components, typescript & babel 7. You can also checkout the components [here](http://mukulbansal.com/react-basis)

## Getting Started

You can install the components using `npm i -S @react-basis/core`.

## Built With

🔥 [react](https://github.com/facebook/react)

💅 [styled-components](https://www.styled-components.com)

⛑ [typescript](https://www.typescriptlang.org/)

📚 [storybook](https://storybook.js.org/)

💥 [babel](https://babeljs.io/)

🐐 [react-testing-library](https://github.com/kentcdodds/react-testing-library)
npm package: @react-basis/theme
Description: This library contains react components default theme and typings for the same for all the components. You can also checkout the components [here](http://mukulbansal.com/react-basis)
Latest version: 1.0.6

# React Components Theme

This library contains react components default theme and typings for the same for all the components. You can also checkout the components [here](http://mukulbansal.com/react-basis)

## Getting Started

You can install the components using `npm i -S @react-basis/theme`.

## Built With

⛑ [typescript](https://www.typescriptlang.org/)

💥 [babel](https://babeljs.io/)
npm package: @react-blockly/core
Description: A React Blockly visual programming editor.
Author: SerSerch
Latest version: 1.7.7

# @react-blockly/core

[![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)
[![types - typescript](https://img.shields.io/npm/types/badge-maker)](https://www.typescriptlang.org)
[![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
<br/>
[![npm version](https://img.shields.io/npm/v/@react-blockly/core.svg)](https://www.npmjs.com/package/@react-blockly/core)
[![npm downloads](https://img.shields.io/npm/dm/@react-blockly/core.svg?style=flat)](https://www.npmjs.com/package/@react-blockly/core)

## Installation

See [Installation Instructions](https://github.com/mobile-blockly/react-blockly/blob/main/docs/core.md).

## [Change Log](https://github.com/mobile-blockly/react-blockly/blob/main/packages/core/CHANGELOG.md)

## Example

[@react-blockly/web-example](https://github.com/mobile-blockly/react-blockly/blob/main/examples/web-example)\
[@react-blockly/native-example](https://github.com/mobile-blockly/react-blockly/blob/main/examples/native-example)

## License

[MIT](LICENSE)
npm package: @react-blockly/native
Description: A React native Blockly visual programming editor.
Author: SerSerch
Latest version: 1.7.7

# @react-blockly/native

[![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)
[![types - typescript](https://img.shields.io/npm/types/badge-maker)](https://www.typescriptlang.org)
[![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
<br/>
[![npm version](https://img.shields.io/npm/v/@react-blockly/native.svg)](https://www.npmjs.com/package/@react-blockly/native)
[![npm downloads](https://img.shields.io/npm/dm/@react-blockly/native.svg?style=flat)](https://www.npmjs.com/package/@react-blockly/native)

## Installation

See [Installation Instructions](https://github.com/mobile-blockly/react-blockly/blob/main/docs/native.md).

## Example

[@react-blockly/native-example](https://github.com/mobile-blockly/react-blockly/blob/main/examples/native-example)

## License

[MIT](LICENSE)
npm package: @react-blockly/web
Description: A React Blockly visual programming editor.
Author: SerSerch
Latest version: 1.7.7

# @react-blockly/web

[![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)
[![types - typescript](https://img.shields.io/npm/types/badge-maker)](https://www.typescriptlang.org)
[![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
<br/>
[![npm version](https://img.shields.io/npm/v/@react-blockly/web.svg)](https://www.npmjs.com/package/@react-blockly/web)
[![npm downloads](https://img.shields.io/npm/dm/@react-blockly/web.svg?style=flat)](https://www.npmjs.com/package/@react-blockly/web)

## Installation

See [Installation Instructions](https://github.com/mobile-blockly/react-blockly/blob/main/docs/web.md).

## Example

[@react-blockly/web-example](https://github.com/mobile-blockly/react-blockly/blob/main/examples/web-example)

## License

[MIT](LICENSE)
npm package: @react-bootstrap/pagination
Description: A batteries included pagination component using bootstrap styles
Latest version: 1.0.0

# pagination

A batteries included pagination component using bootstrap styles. This was
extracted from an older version of react-bootstrap as a migration path.

> **NOT ACTIVELY MAINTAINED:** We recommend you eventually migrate to a more
robust, better maintained solution, such as react-ultimate-pagination

It is a drop-in replacement for the old Pagination component in react-bootstrap (`<= 0.30.x`).

### Alternatives

For users of newer versions of React-Bootstrap we recommend something simpler and
more dedicated to providing proper pagination logic. One good general option is
`react-ultimate-pagination` which can be used with react-bootstrap components easily like:

```jsx
import React from 'react';
import Pagination from 'react-bootstrap/lib/Pagination';
import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';

export default createUltimatePagination({
  WrapperComponent: Pagination,
  itemTypeToComponent: {
    [ITEM_TYPES.PAGE]: ({value, isActive, onClick}) => (
      <Pagination.Item active={isActive}>{value}</Pagination.Item>
    ),
    [ITEM_TYPES.ELLIPSIS]: ({ isActive, onClick }) => (
      <Pagination.Ellipsis disabled={isActive} onClick={onClick} />
    ),
    [ITEM_TYPES.FIRST_PAGE_LINK]: ({ isActive, onClick }) => (
      <Pagination.First disabled={isActive} onClick={onClick} />
    ),
    [ITEM_TYPES.PREVIOUS_PAGE_LINK]: ({ isActive, onClick }) => (
      <Pagination.Prev disabled={isActive} onClick={onClick} />
    ),
    [ITEM_TYPES.NEXT_PAGE_LINK]: ({ isActive, onClick }) => (
      <Pagination.Next disabled={isActive} onClick={onClick} />
    ),
    [ITEM_TYPES.LAST_PAGE_LINK]: ({ isActive, onClick }) => (
      <Pagination.Last disabled={isActive} onClick={onClick} />
    ),
  },
});
```