open-index/open-npm huggingface dataset:
npm package: @react-ui/core
Description: Standard model of UI development
Author: Evgeny Rodionov
Latest version: 1.0.0-beta4

# React UI

Standard model of UI development

[![build status](https://img.shields.io/travis/jqestate/react-ui/master.svg?style=flat)](https://travis-ci.org/jqestate/react-ui)
[![npm version](https://img.shields.io/npm/v/@react-ui/core.svg?style=flat)](https://www.npmjs.com/package/@react-ui/core)


## Table Of Contents

* [Why?](#why)
* [Usage](#usage)
* [Roadmap](#roadmap)
* [License](#license)


## Why?

When building React apps a multitude of components is created. They end up scattered across the project, making it hard to control and use them. React UI tries to solve the problem by encapsulating all of the components into a single dependency that is used across the app:

```jsx
import UI from 'src/components/ui';

const Header = () => (
  <section>
    <UI.Label>Press the button to greet everyone</UI.Label>
    <UI.Button kind="primary">Hello, GitHub!</UI.Button>
  </section>
);
```


## Usage
```sh
npm install --save @react-ui/core
```

Unlike other UI related libraries, React UI doesn't include any built-in components. It rather suggests a pattern for managing components in an app. So, let's create a React UI-compatible component:

```jsx
// src/components/ui/basic/button.jsx

import 'src/styles/button.css';

export default () => (props) => (
  <input type="button" className={`button-${props.kind}`}>
    {props.children}
  </input>
);
```

As you can see, the stateless component is wrapped by a function. It is used for passing [styles](/docs/styling.md) in more complex use cases (explained later in the docs).

React UI exports only a single function that is used for preparing UI for the app:

```javascript
// src/components/ui/index.js

import initUI from '@react-ui/core';
import Button from './button';
import Label from './label';

const components = {
  Button,
  Label,
};

const UI = initUI(components)();
export default UI;
```

React UI pattern revolves around the following three aspects:

  * single point of initialization

  * [styles are passed to components](/docs/styling.md) as a parameter, thus, easing UI theming

  * [UI components can be grouped in layers](/docs/layers.md), where a given layer has access to the components of parent layers. This exact property helps to achieve the proper UI composition.


## Roadmap

* docs and examples;
* core components (as a separate repository);
* styleguide generator;

If you have a suggestion, please, [create an issue](https://github.com/jqestate/react-ui/issues/new).


## License

Apache License, Version 2.0
npm package: @react-use-hooks/use-fetch
Description: React hook to fetch data from network, with some additional awesome features.
Author: Amit Dabade
Latest version: 1.0.1

# [React-use-fetch: useFetch] [![GitHub license](https://img.shields.io/github/license/amitdabade/react-use-fetch?style=flat)](https://github.com/amitdabade/react-use-fetch/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/@react-use-hooks/use-fetch?style=flat)](https://www.npmjs.com/package/@react-use-hooks/use-fetch)

## What is useFetch?

React hook to fetch data from network, with some additional awesome features.

## Installation:

```
npm i @react-use-hooks/use-fetch --save
````

## Code:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { useFetch } from "@react-use-hooks/use-fetch";

function App() {
   const { fetch, data, error, fetching, status, request, response } = useFetch({
    url: "https://jsonplaceholder.typicode.com/todos/1"
   });
   return (
    <div className="App">
      <h1>React-use-hooks : useFetch</h1>
      <button onClick={() => fetch()}>Fetch Data</button>
      <p>Fetching: {fetching + ""}</p>
      <p>Status: {status}</p>
      <p>Request Method: {request?.method}</p>
      <p>Request URL: {request?.url}</p>
      <p>Response code: {response?.status}</p>
      <p>Response Text: {response?.statusText}</p>
      <p>Data: {data && JSON.stringify(data)}</p>
      <p>Error: {error && error.message}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

## Demo:

[Demo](https://codesandbox.io/s/react-use-fetch-demo-5kcix)

## Options:

url : _string_

## License:

This project is licensed under the terms of the
[MIT license](/LICENSE).
npm package: @react-utilities/react-vertical-scroll-distance-detector
Description: Detects vertical scroll distance using React Context
Author: Jeffry Wainwright
Latest version: 0.0.2

# React Utilities

> ## @react-utilities/react-vertical-scroll-distance-detector 🏎

React Vertical Scroll Distance Detector detects the distance that an element has been scrolled.

## Install

To install, run either of the commands below.

```sh
yarn add @react-utilities/react-vertical-scroll-distance-detector
# or
npm install @react-utilities/react-vertical-scroll-distance-detector
```

## Use
npm package: @react-utilities/vertical-scroll-distance-detector
Description: Detects vertical scroll distance using React Context
Author: Jeffry Wainwright
Latest version: 0.0.4

# @react-utilities/vertical-scroll-distance-detector 🏎💨

![Typed with TypeScript](https://flat.badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
[![npm version](https://badge.fury.io/js/%40react-utilities%2Fvertical-scroll-distance-detector.svg)](https://badge.fury.io/js/%40react-utilities%2Fvertical-scroll-distance-detector)

Detects the distance that an element has been scrolled with React context.

---

## Install

```sh
pnpm install @react-utilities/vertical-scroll-distance-detector
```

---

## Usage

```typescript
import React from 'react'
import { 
  VerticalScrollDistanceConsumer, 
  VerticalScrollDistanceProvider,
} from '@react-utilities/vertical-scroll-distance-detector'

function App() {
  return (
    <div className="App">
      <h1>React Context Scroll Distance Detector</h1>
      <VerticalScrollDistanceProvider>
        <VerticalScrollDistanceConsumer>
          {({ verticalScrollDistance }) => (
            <div className="scroll-tracker">
              {verticalScrollDistance}
            </div>
          )}
        </VerticalScrollDistanceConsumer>
      </VerticalScrollDistanceProvider>
    </div>
  )
}
```

---

## Demo

- [Vertical Scroll Distance Detector Demo](https://codesandbox.io/s/react-context-vertical-scroll-distance-detector-lgtui)

---

## React Utilities 🏎💨

**Utilities for React to simplify development**

Everyday components for speeding up React development with little or no extra boilerplate code.

---

**View other [React Utilities](https://github.com/react-utilities/react-utilities).**
npm package: @react-utilities/width-detector
Description: Detects an element's width using React Context
Author: Jeffry Wainwright
Latest version: 0.0.3

# @react-utilities/width-detector 🏎💨

![Typed with TypeScript](https://flat.badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
[![npm version](https://badge.fury.io/js/%40react-utilities%2Fwidth-detector.svg)](https://badge.fury.io/js/%40react-utilities%2Fwidth-detector)

Detect element width using React Context.

---

## Install

```sh
pnpm install @react-utilities/width-detector
```

---

## Usage

```typescript
import React from 'react'
import { 
  WidthConsumer, 
  WidthProvider,
} from '@react-utilities/width-detector'

function App() {
  return (
    <div className="App">
      <WindowWidthProvider>
        <WindowWidthConsumer>
          {({ windowWidth }) => (
            <div className="window-width-tracker">
              {windowWidth}
            </div>
          )}
        </WindowWidthConsumer>
      </WindowWidthProvider>
    </div>
  )
}
```

---

## Demo

- [Width Detector Demo](https://codesandbox.io/s/react-context-window-width-detector-51od7)

---

## React Utilities 🏎💨

**Utilities for React to simplify development**

Everyday components for speeding up React development with little or no extra boilerplate code.

---

**View other [React Utilities](https://github.com/react-utilities/react-utilities).**
npm package: @react-vant/cli
Latest version: 2.0.0-alpha.1

# react-vant-cli

react vant cli 是一个 React 组件库构建工具，通过 react vant cli 可以快速搭建一套 React 组件库

## 特性

- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
npm package: @react-vertex/attribute-hooks
Description: React hooks for WebGL attributes
Author: Steven Hall
Latest version: 1.2.0
Deprecated: This package has been replaced by @react-vertex/core-hooks. Go to react-vertex.com for the latest package information.

# `@react-vertex/attribute-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/attribute-hooks/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/attribute-hooks)](https://bundlephobia.com/result?p=@react-vertex/attribute-hooks)
[![npm version](https://img.shields.io/npm/v/@react-vertex/attribute-hooks.svg)](https://www.npmjs.com/package/@react-vertex/attribute-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with WebGL attributes. More info on [WebGL atrributes on MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer).

##### Install via npm:
```js
npm install @react-vertex/attribute-hooks
```

#### Importing:

```js
import {
  useAttribute
} from '@react-vertex/attribute-hooks'
```

## `useAttribute(gl, program, name, size, buffer, [getOptions])` => `index`

React hook for WebGL attributes.

##### Arguments:

`gl`: A WebGL context.

`program`: The [WebGLProgram](https://developer.mozilla.org/en-US/docs/Web/API/WebGLProgram) you want to attach the attribute to.

`name`: String name of the attribute used in the shader for the supplied program.

`size`: An integer indicating the number of components per vertex attribute. Must be 1, 2, 3, or 4.

`buffer`: A WebGL buffer. You can use hooks from `buffer-hooks` to create it.

`getOptions`: A function that will be called with the context (gl) that returns an object with the options you wish to override.

###### Valid keys in object returned by getOptions:
  - `target` defualts to gl.ARRAY_BUFFER
  - `type` defaults to gl.FLOAT
  - `normalized` defaults to false
  - `stride` defualts to 0
  - `offset` defaults to 0

##### Returns:

`index`: The index of the attribute.


##### Example Usage

```js
import { useStaticBuffer } from '@react-vertex/buffer-hooks'
import { useProgram } from '@react-vertex/shader-hooks'
import { useAttribute } from '@react-vertex/attribute-hooks'

const attrOptions = gl => ({
  type: gl.SHORT,
  stride: 20,
  offset: 16,
})

...
  const program = useProgram(gl, vert, frag)
  gl.useProgram(program)

  const myBuffer = useStaticBuffer(gl, position.array)
  useAttribute(gl, program, 'attrName', 3, myBuffer, attrOptions)
...

```
npm package: @react-vertex/color-hooks
Description: React hooks for WebGL friendly colors
Author: Steven Hall
Latest version: 3.0.0

## `@react-vertex/color-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/color-hooks/LICENSE)
[![npm version](https://img.shields.io/npm/v/@react-vertex/color-hooks.svg)](https://www.npmjs.com/package/@react-vertex/color-hooks)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/color-hooks)](https://bundlephobia.com/result?p=@react-vertex/color-hooks)

### [Documentation and Examples](https://react-vertex.com)

Hooks and utility functions for converting colors to WebGL friendly formats.

##### Install via npm:
```js
npm install @react-vertex/color-hooks
```

##### Importing:

```js
import {
  useHex,
  convertHex,
  useRgb,
  convertRgb,
} from '@react-vertex/color-hooks'
```

#### `useHex(hex, noAlpha?)` => `Array`
#### `convertHex(hex, noAlpha?)` => `Array`

Convert hex colors to WebGL friendly format. Exported as a hook (`useHex`) and a utility function (`convertHex`).

###### Arguments:

`hex`: String hex color.

`noAlpha (optional)`: Boolean indicating if you want the alpha value in the array.

###### Returns:

`array`: An array of numbers between 0 and 1.  A four element array by default and three elements if the `noAlpha` parameter is used.

###### Example Usage:

```js
import {
  useHex,
  convertHex,
} from '@react-vertex/color-hooks'

const [r, g, b, a] = useHex('#fff')
// [1, 1, 1, 1]

const clearColor = useHex('#0006')
// [0, 0, 0, 0.4]

convertHex('#4183c4')
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922, 1]

convertHex('#4183c4', true) // Drop the alpha by passing true as a second param 
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922]

gl.clearColor(...convertHex('#323334'))
```

#### `useRgb(rgb, noAlpha?)` => `Array`
#### `convertRgb(rgb, noAlpha?)` => `Array`

Convert rgb colors to WebGL friendly format. Exported as a hook (`useRgb`) and a utility function (`convertRgb`).

###### Arguments:

`rgb`: String rgb color e.g. `'rgb(40, 42, 54)'` or `'rgba(40, 42, 54, 75%)'`.

`noAlpha (optional)`: Boolean indicating if you want the alpha value in the array.

###### Returns:

`array`: An array of numbers between 0 and 1.  A four element array by default and three elements if the `noAlpha` parameter is used.

###### Example Usage:

```js
import {
  useRgb,
  convertRgb,
} from '@react-vertex/color-hooks'

const [r, g, b, a] = useRgb('rgb(255, 255, 255)');
// [1, 1, 1, 1]

const clearColor = convertRgb('rgb(255, 0, 255)', true)
// [1, 0, 1]
```
npm package: @react-vertex/core-hooks
Description: React hooks for WebGL attributes
Author: Steven Hall
Latest version: 1.1.0
Deprecated: This package has been replaced by @react-vertex/core. Go to react-vertex.com for the latest package information.

# `@react-vertex/core-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/core-hooks/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/core-hooks)](https://bundlephobia.com/result?p=@react-vertex/core-hooks)
[![npm version](https://img.shields.io/npm/v/@react-vertex/core-hooks.svg)](https://www.npmjs.com/package/@react-vertex/core-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with WebGL buffers, shaders, attributes, uniforms and textures.
npm package: @react-vertex/dom-hooks
Description: React hooks for DOM operations
Author: Steven Hall
Latest version: 1.11.0

## `@react-vertex/dom-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/dom-hooks/LICENSE)
[![npm version](https://img.shields.io/npm/v/@react-vertex/dom-hooks.svg)](https://www.npmjs.com/package/@react-vertex/dom-hooks)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/dom-hooks)](https://bundlephobia.com/result?p=@react-vertex/dom-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for DOM operations.

##### Install via npm:
```js
npm install @react-vertex/dom-hooks
```

##### Importing:

```js
import {
  useMeasure,
  useViewportSize,
} from '@react-vertex/dom-hooks'
```
#### `useMeasure(ref)` => `bounds`

React hook to get measurements of a DOM element.

###### Arguments:

`ref`: A React ref for the element you want to measure.

###### Returns:

`bounds`: An object e.g `{ left: 0, top: 0, width: 100, height: 100 }`

###### Example Usage:

```js
import React, { useRef } from 'react'
import { Canvas } from '@react-vertex/core'
import { useMeasure } from '@react-vertex/dom-hooks'

function Example() {
  const container = useRef()
  const { width, height } = useMeasure(container)
    
  return (
    <div ref={container}>
      <Canvas
        width={width}
        height={height}
      >
        ...
      </Canvas>
    </div>
  )
}
```

#### `useViewportSize()` => `size`

React hook to use `window.innerWidth` and `window.innerHeight` of the browser window viewport. This hook will update if the window is resized.

###### Arguments:

- None.

###### Returns:

`size`: An object e.g. `{ width: 200, height: 100 }`

###### Example Usage:

```js
import React from 'react'
import { Canvas } from '@react-vertex/core'
import { useViewportSize } from '@react-vertex/dom-hooks'

function Example() {
  const { width, height } = useViewportSize()
    
  return (
    <Canvas
      width={width}
      height={height}
    >
      ...
    </Canvas>
  )
}
```
npm package: @react-vertex/gl-context
Description: React WebGL Context Component
Author: Steven Hall
Latest version: 3.1.0
Deprecated: This package has been replaced by @react-vertex/core. Go to react-vertex.com for the latest package information.

# `@react-vertex/gl-context`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/gl-context/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/gl-context)](https://bundlephobia.com/result?p=@react-vertex/gl-context)
[![npm version](https://img.shields.io/npm/v/@react-vertex/gl-context.svg)](https://www.npmjs.com/package/@react-vertex/gl-context)

### [Documentation and Examples](https://react-vertex.com)

A React component to render a canvas and create a WebGL context.  It uses the render prop pattern.  For SSR this component will not render its children. **Note: it's not required to use this component to use the other hook packages.**

##### Install via npm:
```js
npm install @react-vertex/gl-context
```

#### Importing:

```js
import GlContext from '@react-vertex/gl-context'
```

##### Props:

`width`: Number for width of canvas element (defaults to 1).

`height`: Number for height of canvas element (defaults to 1).

`antialias (optional)`: Boolean to turn on antialiasing (defaults to false).

`canvasClass (optional)`: String class to be added to the canvas.

`canvasStyle (optional)`: An object of styles to be applied to the canvas.

`extensions (optional)`: An array of strings identifying the [WebGL extensions](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Using_Extensions) you want loaded in the context.

`contextAttrs (optional)`: An object of context attributes you want applied.

`children`: A function that accepts the context (`gl`) and an array of the extension return values (if using any extensions are being used) defaults to an empty array.

##### Example Usage:

```js
import React, { useRef } from 'react'
import GLContext from '@react-vertex/gl-context'
import { useMeasure } from '@react-vertex/dom-hooks'

function Example() {
  const container = useRef()
  const { width } = useMeasure(container)

  return (
    <div ref={container}>
      <GLContext
        width={width}
        height={width}
        canvasStyle={{
          borderRadius: 4
        }}
      >
        {(gl, extensions) => (
          <Scene gl={gl} extensions={extensions} />
        )}
      </GLContext>
    </div>
  )
}

export default Example
```
npm package: @react-vertex/hex-webgl
Description: Convert hex colors to WebGL friendly format
Author: Steven Hall
Latest version: 1.1.0
Deprecated: This package has been replaced by @react-vertex/color-hooks. Go to react-vertex.com for the latest package information.

# `@react-vertex/hex-webgl`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/hex-webgl/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/hex-webgl)](https://bundlephobia.com/result?p=@react-vertex/hex-webgl)
[![npm version](https://img.shields.io/npm/v/@react-vertex/hex-webgl.svg)](https://www.npmjs.com/package/@react-vertex/hex-webgl)

### [Documentation and Examples](https://react-vertex.com)

Simple helper function to convert hex colors to a WebGL friendly format.

```
import convertHex from '@react-vertex/hex-webgl'

convertHex('#fff')
// [1, 1, 1, 1]

convertHex('#0006')
// [0, 0, 0, 0.4]

convertHex('#4183c4')
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922, 1]

convertHex('#4183c4', true) // Drop the alpha by passing true as a second param 
// [0.2549019607843137, 0.5137254901960784, 0.7686274509803922]

gl.clearColor(...convertHex('#323334'))
```
npm package: @react-vertex/materials
Description: React WebGL material components
Author: Steven Hall
Latest version: 0.4.0
Deprecated: This package has been replaced by @react-vertex/material-hooks. Go to react-vertex.com for the latest package information.

# `@react-vertex/gl-context`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/gl-context/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/gl-context)](https://bundlephobia.com/result?p=@react-vertex/gl-context)
[![npm version](https://img.shields.io/npm/v/@react-vertex/gl-context.svg)](https://www.npmjs.com/package/@react-vertex/gl-context)

### [Documentation and Examples](https://react-vertex.com)

A React component to render a canvas and create a WebGL context.  It uses the render prop pattern.  For SSR this component will not render its children. **Note: it's not required to use this component to use the other hook packages.**

##### Install via npm:
```js
npm install @react-vertex/gl-context
```

#### Importing:

```js
import GlContext from '@react-vertex/gl-context'
```

##### Props:

`width`: Number for width of canvas element (defaults to 1).

`height`: Number for height of canvas element (defaults to 1).

`antialias (optional)`: Boolean to turn on antialiasing (defaults to false).

`canvasClass (optional)`: String class to be added to the canvas.

`canvasStyle (optional)`: An object of styles to be applied to the canvas.

`extensions (optional)`: An array of strings identifying the [WebGL extensions](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Using_Extensions) you want loaded in the context.

`contextAttrs (optional)`: An object of context attributes you want applied.

`children`: A function that accepts the context (`gl`) and an array of the extension return values (if using any extensions are being used) defaults to an empty array.

##### Example Usage:

```js
import React, { useRef } from 'react'
import GLContext from '@react-vertex/gl-context'
import { useMeasure } from '@react-vertex/dom-hooks'

function Example() {
  const container = useRef()
  const { width } = useMeasure(container)

  return (
    <div ref={container}>
      <GLContext
        width={width}
        height={width}
        canvasStyle={{
          borderRadius: 4
        }}
      >
        {(gl, extensions) => (
          <Scene gl={gl} extensions={extensions} />
        )}
      </GLContext>
    </div>
  )
}

export default Example
```
npm package: @react-vertex/math-hooks
Description: React hooks for WebGL vectors and matrices
Author: Steven Hall
Latest version: 3.0.0

# `@react-vertex/math-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/math-hooks/LICENSE)
[![npm version](https://img.shields.io/npm/v/@react-vertex/math-hooks.svg)](https://www.npmjs.com/package/@react-vertex/math-hooks)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/math-hooks)](https://bundlephobia.com/result?p=@react-vertex/math-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with vectors and matrices in WebGL.
npm package: @react-vertex/matrix-hooks
Description: React hooks for WebGL matrix operations
Author: Steven Hall
Latest version: 1.3.0
Deprecated: This package has been replaced by @react-vertex/math-hooks

# `@react-vertex/matrix-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/matrix-hooks/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/matrix-hooks)](https://bundlephobia.com/result?p=@react-vertex/matrix-hooks)
[![npm version](https://img.shields.io/npm/v/@react-vertex/matrix-hooks.svg)](https://www.npmjs.com/package/@react-vertex/matrix-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with matrices in WebGL.  This package just contains a couple of items that were helpful in developing the examples.  I think a package like this would be great but the API needs to be fleshed out.  This package uses [gl-matrix](http://glmatrix.net/docs/module-mat4.html).

##### Install via npm:
```js
npm install @react-vertex/matrix-hooks
```

#### Importing:

```js
import {
  useIdentity,
  usePerspective,
} from '@react-vertex/matrix-hooks'
```
## `usePerspective(fov, aspect, near, far)` => `matrix`

React hook to create a perspective projection matrix with the given field of view.

##### Arguments:

`fov`: A number defining the field of view.  Generally, numbers from 35 to 75 are reasonable. 

`aspect`: A number defining aspect ratio.  In most cases you want to use canvas.width / canvas.height but other scenarios exist.

`near (optional)`: The camera frustum near plane. Defaults to 1.

`far (optional)`: The camera frustum far plane. Defaults to 1000.

##### Returns:

`matrix`: Returns an instance of a [gl-matrix mat4](http://glmatrix.net/docs/module-mat4.html)

##### Example Usage:

```js
import { usePerspective } from '@react-vertex/matrix-hooks'

...
  const projection = usePerspective(55, canvas.width / canvas.height, 0.1, 5000)
...
```

## `useIdentity([px], [py], [pz], [rx], [ry], [rz])` => `matrix`

React hook to create a new identity matrix.  You can set the initial position and rotation.

##### Arguments:

`px (optional)`: A number for the x position. Defaults to 0.

`py (optional)`: A number for the y position. Defaults to 0.

`pz (optional)`: A number for the z position. Defaults to 0.

`rx (optional)`: A number for the x rotation in radians. Defaults to 0.

`ry (optional)`: A number for the y rotation in radians. Defaults to 0.

`rz (optional)`: A number for the z rotation in radians. Defaults to 0.

##### Returns:

`matrix`: Returns an instance of a [gl-matrix mat4](http://glmatrix.net/docs/module-mat4.html)

##### Example Usage:

```js
import { useIdentity } from '@react-vertex/matrix-hooks'

...
  const view = useIdentity(0, 20, 0)
...
```
npm package: @react-vertex/orbit-camera
Description: Orbit Camera and Controls for React Vertex
Author: Steven Hall
Latest version: 4.0.0

## `@react-vertex/orbit-camera`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/orbit-camera/LICENSE)
[![npm version](https://img.shields.io/npm/v/@react-vertex/orbit-camera.svg)](https://www.npmjs.com/package/@react-vertex/orbit-camera)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/orbit-camera)](https://bundlephobia.com/result?p=@react-vertex/orbit-camera)

### [Documentation and Examples](https://react-vertex.com)

React hooks for basic orbit style perspective camera and controls.

##### Install via npm:
```js
npm install @react-vertex/orbit-camera
```

##### Importing:

```js
import {
  useOrbitCamera,
  useOrbitControls,
} from '@react-vertex/orbit-camera'
```

#### `useOrbitCamera(fov, aspect, near?, far?, configure?)` => `camera`

React hook for creating an orbit camera.

###### Arguments:

`fov`: Number defining the field of view in **degrees** (not radians).

`aspect`: Number defining the aspect ratio.

`near (optional)`: Number for the camera frustum near plane (defaults to 1).

`far (optional)`: Number for the camera frustum far plane (defaults to 1000).

`configure (optional)`: Function to configure the instance before being returned. Changes to this parameter will not cause the hook to update, so you can provide an in-line function. 

###### Returns:

`camera`: The camera instance.

###### Example Usage:

```js
import { useCanvasSize } from '@react-vertex/core'
import { useOrbitCamera, useOrbitControls } from '@react-vertex/orbit-camera'

...
  const { width, height } = useCanvasSize()
  
  const camera = useOrbitCamera(55, width / height, 1, 1000, c => {
    c.setPosition([0, 0, 25])
  })
  useOrbitControls(camera)
...
```

- Set `userRotate` to false to disable rotation in x and y (orbit camera only rotates in x and y).
- Set `userRotateX` to false to disable only rotation in x.
- Set `userRotateY` to false to disable only rotation in y.
- Set `userDolly` to false to disable dolly function.

```
  const camera = useOrbitCamera(55, width / height, 1, 5000, c => {
    c.setPosition([0, 0, 500])
    c.userRotate = false
  })
```

#### `useOrbitControls(camera, configure?)` => `controls`

React hook to setup camera controls.

###### Arguments:

`camera`: An instance of the orbit camera.

`configure (optional)`: Function to configure the instance before being returned. Changes to this parameter will not cause the hook to update, so you can provide an in-line function. 

###### Returns:

`controls`: The controls instance.

###### Example Usage:

```js
import { useCanvasSize } from '@react-vertex/core'
import { useOrbitCamera, useOrbitControls } from '@react-vertex/orbit-camera'

...
  const { width, height } = useCanvasSize()
  
  const camera = useOrbitCamera(55, width / height, 1, 1000, c => {
    c.setPosition([0, 0, 25])
  })
  useOrbitControls(camera)
...
npm package: @react-vertex/renderer
Description: React WebGL renderer
Author: Steven Hall
Latest version: 0.3.0
Deprecated: This package has been replaced by @react-vertex/core. Go to react-vertex.com for the latest package information.

# `@react-vertex/renderer`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/renderer/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/renderer)](https://bundlephobia.com/result?p=@react-vertex/renderer)
[![npm version](https://img.shields.io/npm/v/@react-vertex/renderer.svg)](https://www.npmjs.com/package/@react-vertex/renderer)

### [Documentation and Examples](https://react-vertex.com)

React renderer for React Vertex.

##### Install via npm:
```js
npm install @react-vertex/renderer
```

#### Importing:

```js
import Renderer from '@react-vertex/renderer'
```
npm package: @react-vertex/texture-hooks
Description: React hooks for WebGL textures
Author: Steven Hall
Latest version: 2.1.0
Deprecated: This package has been replaced by @react-vertex/core-hooks. Go to react-vertex.com for the latest package information.

# `@react-vertex/texture-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/texture-hooks/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/texture-hooks)](https://bundlephobia.com/result?p=@react-vertex/texture-hooks)
[![npm version](https://img.shields.io/npm/v/@react-vertex/texture-hooks.svg)](https://www.npmjs.com/package/@react-vertex/texture-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with WebGL textures. More info on [using textures in WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL).

##### Install via npm:
```js
npm install @react-vertex/texture-hooks
```

#### Importing:

```js
import {
  useTexture2d
} from '@react-vertex/texture-hooks'
```

## `useTexture2d(gl, url, [getOptions])` => \[`WebGLTexture`, `isLoaded`\]

React hook for 2d WebGL textures. It returns a texture immediately with a placeholder pixel and updates it when the image loads.

##### Arguments:

`gl`: A WebGL context.

`url`: The URL of the texture image to load.

`getOptions (optional)`: A function that will be called with the context (gl) that returns an object with the options you wish to override.

###### Valid keys in object returned by getOptions:
  - `format` defualts to gl.RGBA
  - `mipMaps`Boolean defaults to true. More on [mipmaps](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/generateMipmap).
  - `type` defaults to gl.UNSIGNED_BYTE
  - `wrap` defaults to null (sets both wrapS and wrapT)
  - `wrapS` defaults to gl.REPEAT (will be overridden by `wrap` if used)
  - `wrapT` defaults to gl.REPEAT (will be overridden by `wrap` if used)
  - `minMag` defaults to null (sets both minFilter and magFilter)
  - `minFilter` defaults to gl.NEAREST_MIPMAP_LINEAR (will be overridden by `minMag` if used)
  - `magFilter` defaults to gl.LINEAR (will be overridden by `minMag` if used)
  - `placeholder` defaults to a black pixel (new Uint8Array(\[0, 0, 0, 1\]))

##### Returns:

\[`texture`, `isLoaded`\] : An array with a [WebGLTexture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture) as the first item and a boolean `isLoaded` indicating whether the full image has loaded yet.

##### Example Usage

```js
import { useProgram } from '@react-vertex/shader-hooks'
import { useUniformSampler2d } from '@react-vertex/uniform-hooks'
import { useTexture2d } from '@react-vertex/texture-hooks'

const textureOptions = gl => ({
  placeholder: new Uint8Array([0, 0, 1, 1]) // blue
})

...
  const program = useProgram(gl, vert, frag)
  gl.useProgram(program)

  const [texDiff] = useTexture2d(gl, tilesDiffUrl, textureOptions)
  useUniformSampler2d(gl, program, 'texDiff', texDiff, 0) // setup a sampler uniform to read unit 0
...

```
npm package: @react-vertex/vector-hooks
Description: React hooks for WebGL vector operations
Author: Steven Hall
Latest version: 1.1.0
Deprecated: This package has been replaced by @react-vertex/math-hooks. Go to react-vertex.com for the latest package information.

# `@react-vertex/vector-hooks`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/vector-hooks/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/vector-hooks)](https://bundlephobia.com/result?p=@react-vertex/vector-hooks)
[![npm version](https://img.shields.io/npm/v/@react-vertex/vector-hooks.svg)](https://www.npmjs.com/package/@react-vertex/vector-hooks)

### [Documentation and Examples](https://react-vertex.com)

React hooks for working with vectors in WebGL.  This package just contains a couple of items that were helpful in developing the examples.  I think a package like this would be great but the API needs to be fleshed out.  This package uses [gl-matrix](http://glmatrix.net/docs/module-mat4.html).

##### Install via npm:
```js
npm install @react-vertex/vector-hooks
```

#### Importing:

```js
import {
  useVector3,
} from '@react-vertex/vector-hooks'
```
## `useVector3(x, y, z)` => `vector`

React hook to create a vector with x, y, and z values.  If any value (x, y or z) changes the hook will return a new vector.  It does not mutate the existing.

##### Arguments:

`x`: A number for the x value.

`y`: A number for the y value.

`z`: A number for the z value.

##### Returns:

`vector`: Returns an instance of a [gl-matrix vec3](http://glmatrix.net/docs/module-vec3.html)

##### Example Usage:

```js
import { useVector3 } from '@react-vertex/vector-hooks'

...
  const position = useVector3(100, 0, 0)
...
```
npm package: @react-vertex/webgl-renderer
Description: React WebGL renderer
Author: Steven Hall
Latest version: 1.0.0
Deprecated: This package has been replaced by @react-vertex/core. Go to react-vertex.com for the latest package information.

# `@react-vertex/renderer`

[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/sghall/react-vertex/blob/master/packages/renderer/LICENSE)
[![bundlephobia](https://badgen.net/bundlephobia/minzip/@react-vertex/renderer)](https://bundlephobia.com/result?p=@react-vertex/renderer)
[![npm version](https://img.shields.io/npm/v/@react-vertex/renderer.svg)](https://www.npmjs.com/package/@react-vertex/renderer)

### [Documentation and Examples](https://react-vertex.com)

React renderer for React Vertex.

##### Install via npm:
```js
npm install @react-vertex/renderer
```

#### Importing:

```js
import Renderer from '@react-vertex/webgl-renderer'
```
npm package: @react-vibrant/core
Description: React component based on Bulma and Typescript
Author: marianfurriel
Latest version: 0.0.6

# `@react-vibrant/core`

## List of components exposed:

- Button
- Checkbox
- Control
- Delete
- Input
- ProgressBar
- Radio
- Select
- Table
- Tag
- TextArea

## Usage:

Add the following file in app index:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Import styles
import '@react-vibrant/core/build/index.css';

ReactDOM.render(<App />, document.getElementById('root'));

```

Then:

```js
import { Button } from '@react-vibrant/core';

function App() {
  return (
    <Button type="primary">Awesome button</Button>
  );
}
```
npm package: @react-vibrant/ionicons-icons
Description: React ionicons icons
Author: marianfurriel
Latest version: 0.0.1

# `@react-vibrant/ionicons-icons`

## Usage:

Add the following file in app index:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Import styles
import '@react-vibrant/ionicons-icons/build/index.css';

ReactDOM.render(<App />, document.getElementById('root'));

```

Then:

```js
import { Icon } from '@react-vibrant/ionicons-icons';

function App() {
  return (
    <Icon containerSize="small" iconSize="medium" color="white" value="ion-ios-add-circle-outline"/>
  );
}
```
npm package: @react-vision-components/react-vision-tags
Description: Component Library to handle Tags with confidence scores
Author: District Cloud Solutions, LLC
Latest version: 0.9.2

# React Vision Tags
[![MIT](https://img.shields.io/npm/l/react-tag-input.svg?style=flat-square)](https://github.com/react-vision-components/react-vision-tags/blob/main/LICENSE)

## But Why?!
Created in order to make Computer Vision tags from Azure Computer Vision more flashy for a customer and end user who likes to see different things.    

## Features, not bugs
- Added tags automatically have a score of 100% by design.
- Color of background text will(note: should) switch from black to white baste on luminence of the background that is generated.  
- More to come but it's too late and I can't remember them all :-|
## Install

To install this component:

```bash
  npm i @react-vision-components/react-vision-tags
```

## Usage

1.  Create your colors
```typescript
const colors:ColorSpectrum = { low: 'FF0000', mid: 'FFFF00', high: '00FF00' }
```
2.  Set your thresholds:
```typescript
const threshold:ConfidenceThreshold = { low: 70, high: 90 }
```

3.  Create your schema:
```typescript
const colorScheme:ColorInterpolatorOptions = new ColorInterpolatorOptions(colors, threshold);
```

4.  Drop the component on your page:
```html
<VisionTags value={item.cloudTags as Vision[]} name={tags} schema={colorScheme} placeHolder='Enter tags' />
```

NOTE:  value is expecting an array of objects with properties "name" of type string and "confidence" and percentage as a decimal string...for example:
```JSON
{
    name: 'Example',
    confidence: '0.91'
}
```
## Authors

- [District Cloud Solutions, LLC](https://www.districtcloudsolutions.com)
npm package: @react-wave/rn-ui
Description: React WAVE UI Library ReactNative
Author: React-Wave UI
Latest version: 0.0.1

<div align="center">
Cross Platform <a href="https://reactnative.dev">React Native</a> UI Library
</div>

## Installation

```bash
## using npm
npm install @rn-horizon-ui

## using yarn
yarn add @rn-horizon-ui
```

Follow
[these instructions](https://horizon-ui.dev/docs/installation)
to install React Native Horizon UI!

## React Native Web support

As a cross platform UI Toolkit, you can now use RN-Horizon-UI on the web & share your codebase between your React Native + React web apps. RN-Horizon-UI components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RN-Horizon-UI and [React Native for Web](https://github.com/necolas/react-native-web).

Click [here](https://google.com) for a full walkthrough using RN-Horizon-UI + React Native Web.
npm package: @react-web-kit/theme-provider
Description: Paquete para estilos globales
Author: Jhonatan Benavides
Latest version: 1.0.5

# 🎨 TremeProvider

`TremeProvider` is a React component that provides a theming system based on `styled-components`. It allows applying global styles and customizing the theme using a configuration object.

## 📦 Installation

With npm
```sh
npm install @react-web-kit/theme-provider
```

With Yarn:

```sh
yarn add @react-web-kit/theme-provider
```

With pnpm:

```sh
pnpm add @react-web-kit/theme-provider
```

## 🚀 Usage

```tsx
import React from 'react';
import ThemeProvider from '@react-web-kit/theme-provider';
import App from './App';

const MyApp = () => {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
};

export default MyApp;
```

## ⚙️ Props

| Prop              | Type                  | Description |
|------------------|----------------------|-------------|
| `children`       | `React.ReactNode`     | Elements that will be wrapped inside the theme provider. |
| `customTheme`    | `PartialDefaultTheme` | Allows customization of the default theme. |
| `resetGlobalStyles` | `boolean` | If `true`, applies the defined global styles. |

## 🎨 Theme Customization

You can extend the default theme using `customTheme`.

```tsx
import React from 'react';
import ThemeProvider from '@react-web-kit/theme-provider';

const customTheme = {
  colors: {
    primary: '#ff5733',
    secondary: '#33ff57',
  },
};

const MyApp = () => {
  return (
    <ThemeProvider customTheme={customTheme}>
      <h1>Hello, world!</h1>
    </ThemeProvider>
  );
};

export default MyApp;
```

## 🌍 Global Styles

If you want to apply global styles, use `resetGlobalStyles`:

```tsx
<ThemeProvider resetGlobalStyles>
  <App />
</ThemeProvider>
```

## 🤝 Contributing

If you would like to contribute, please open a PR or issue on the GitHub repository. All contributions are welcome! 🚀

## 📜 License

This project is licensed under the MIT License.
npm package: @react-web-kit/ui
Description: 🚀 Production-ready React components.
Author: Jhonatan Benavides
Latest version: 3.1.6

# @react-web-kit/ui

[![npm version](https://img.shields.io/npm/v/@react-web-kit/ui.svg?color=blue)](https://www.npmjs.com/package/@react-web-kit/ui)
[![npm downloads](https://img.shields.io/npm/dm/@react-web-kit/ui.svg)](https://www.npmjs.com/package/@react-web-kit/ui)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@react-web-kit/ui)](https://bundlephobia.com/package/@react-web-kit/ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

---

**@react-web-kit/ui** is a modern, production-ready React component library designed to accelerate the development of high-quality web applications.

## Key Features

- **Modern & Accessible:** Built with accessibility and best practices in mind.
- **TypeScript Support:** Fully typed for a seamless developer experience.
- **Customizable:** Easily adaptable to your brand and project needs.
- **Production-Ready:** Thoroughly tested and ready for real-world use.
- **Active Maintenance:** Continuously improved and updated.

## Installation

Install the package using your preferred package manager:

```sh
pnpm add @react-web-kit/ui
# or
npm install @react-web-kit/ui
# or
yarn add @react-web-kit/ui
```

## Usage Example

Import and use components in your React application:

```tsx
import { Button } from '@react-web-kit/ui'

export default function App() {
  return <Button>Click me</Button>
}
```

## Documentation & Demos

Comprehensive documentation and live component demos are available at:  
[https://github.com/Jhonatan815/react-ds-kit-ui#readme](https://github.com/Jhonatan815/react-ds-kit-ui#readme)

To explore components locally with Storybook:

```sh
pnpm storybook
```

## Available Scripts

- **Build:**  
  `pnpm build` – Compile TypeScript and CSS for production.
- **Test:**  
  `pnpm test` – Run unit tests with Vitest.
- **Storybook:**  
  `pnpm storybook` – Launch Storybook for interactive component development.
- **Build Storybook:**  
  `pnpm build-storybook` – Generate a static Storybook site.

## Contributing

We welcome contributions from the community and industry professionals.  
If you have suggestions, issues, or feature requests, please open an [issue](https://github.com/Jhonatan815/react-ds-kit-ui/issues) or submit a pull request.

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).

---

MIT © [Jhonatan Benavides](https://github.com/Jhonatan815)
npm package: @react-web/app-registry
Description: ## Usage
Latest version: 0.2.6

# @react-web/app-registry

## Usage

```js
import { AppRegistry } from '@react-web/components'

const App = () => {
  return (
    <View >hello world!</View>
  )
}

AppRegistry.registerComponent('app', () => App, {
  mountPoint: document.getElementById('app')
})
```

## License
[MIT↗](../../LICENSE)
npm package: @react-web/hover
Author: heineiuo
Latest version: 0.1.7

# @react-shared/hover


## Install

```bash
yarn add @react-shared/hover # or npm install @react-shared/hover
```

## Usage

### high order component
```javascript
import React, {Component} from 'react'
import {withHover} from '@react-shared/hover'

class Example extends Component {
  render(){
    return (
      <div>
        {this.props.isHovered ? 'hovered': 'not hovered'}
      </div>
    )
  }
}

export default withHover(Example)



```

### component

```javascript
import React, {Component} from 'react'
import {Hover} from '@react-shared/hover'

class Example extends Component {
  render() {
    return (
      <Hover>
        {(props) => {
          return (
            <div>
              {this.props.isHovered ? 'hovered': 'not hovered'}
            </div>
          )
        }}
      </Hover>
    )
  }
}

export default Example

```


#### props

* *tagName* the wrapper tagName, default 'dev'
* *className* only work when children is string or array
* *style* only work when children is string or array
* **onStateChange** the hover state, example: 

    ```javascript
      onStateChange = (state) => {console.log(state.isHovered)}
    ``` 

## License

MIT
npm package: @react-web/i18n
Description: Use simple components(<EN>, <ZH> and etc) to create i18n apps.
Latest version: 0.0.1

# @react-shared/lang

Use simple components(`<EN>`, `<ZH>` and etc) to create i18n apps.
Inspired by [react-language](https://github.com/Lobos/react-language)

---

## Install

```bash
npm install react-lang --save-dev
```

## Example

```js
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Language, ZH, EN} from '@react-shared/lang'

class Example extends Component {
  render (){
    <div>
      <ZH>你好, 世界</ZH>
      <EN>hello, world</EN>
    </div>
  }
}

ReactDOM.render((
  <Language>
    <Example />
  </Language>
), document.getElementById('app'))
```

## License

MIT
npm package: @react-web/image
Latest version: 0.2.6

# @react-web/image 


## Usage

```jsx
import { Image } from "@react-web/components"
// or: 
// import Image from "@react-web/image"

render(
  <Image
    source={[{ uri: "https://example.com/1.jpg"}]}
  >
)
```

## License

[MIT↗](../../LICENSE)
npm package: @react-web/promise-view
Description: ## Usage
Latest version: 0.2.4

# @react-web/promise-view

## Usage

```js
import PromiseView from '@react-web/promise-view'
// or
// import { PromiseView } from '@react-web/components'

render(
  <PromiseView promise={Promise.resolve('success')}>
  {(state, result) => {
    if (state === 'resolved') return <div>Data: {result}</div>
    if (state === 'rejected') return <div>Error: {result.message}</div>
    if (state === 'pending') return <div>Loading...</div>
    return null
  }}
  </PromiseView>
)
```

## Reference

[如何优雅地结合类 Redux 处理异步通信的中间状态？
](https://www.zhihu.com/question/66869266/answer/345948392)

## License

[MIT↗](../../LICENSE)