npm package: @react-vertex/buffer-hooks
Description: React hooks for WebGL buffers
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/buffer-hooks`

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

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

React hooks for working with WebGL buffers. Efficiently manage static, stream, and dynamic buffers for use in WebGL programs.

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

#### Importing:

```js
import {
  useStaticBuffer,
  useStreamBuffer,
  useDynamicBuffer,
} from '@react-vertex/buffer-hooks'
```

## `useStaticBuffer(gl, data, [isIndex], [format])` => `WebGLBuffer`

React hook to create a static WebGL buffer. For cases where the contents of the buffer are likely to be used often and not change often. See [docs on WebGL buffers](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData) for more.

##### Arguments:

`gl`: A WebGL context.

`data`: An array. If you pass a regular array, use `format` to convert to a typed array.

`isIndex (optional)`: Boolean indicating if you want to create an index buffer or not. Defaults to false.

`format (optional)`: A string format e.g. 'F32'.  See formats list below.

##### Returns:

`buffer`: A [WebGLBuffer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer) instance.

## `useStreamBuffer(gl, data, [isIndex], [format])` => `WebGLBuffer`

React hook to create a WebGL stream buffer. For cases where the contents of the buffer are likely to not be used often. See [docs on WebGL buffers](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData) for more.

##### Arguments:

`gl`: A WebGL context.

`data`: An array. If you pass a regular array, use `format` to convert to a typed array.

`isIndex (optional)`: Boolean indicating if you want to create an index buffer or not. Defaults to false.

`format (optional)`: A string format e.g. 'F32'.  See formats list below.

##### Returns:

`buffer`: A [WebGLBuffer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer) instance. 

## `useDynamicBuffer(gl, data, [isIndex], [format])` => `WebGLBuffer`

React hook to create a dynamic WebGL buffer. For cases where the contents of the buffer are likely to be used often and change often. See [docs on WebGL buffers](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData) for more.

##### Arguments:

`gl`: A WebGL context.

`data`: An array. If you pass a regular array, use `format` to convert to a typed array.

`isIndex (optional)`: Boolean indicating if you want to create an index buffer or not. Defaults to false.

`format (optional)`: A string format e.g. 'F32'.  See formats list below.

##### Returns:

`buffer`: A [WebGLBuffer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer) instance. 

## Valid Formats

[Typed Arrays on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays#Typed_array_views)

| Format | Type         | Range                            |
| -------|--------------|----------------------------------|
| 'U8'   | Uint8Array   | -128 to 127                      |
| 'U16'  | Uint16Array  | -32,768 to 32,767                |
| 'U32'  | Uint32Array  | -2,147,483,648 to 2,147,483,647  |
| 'I8'   | Int8Array    | -128 to 127                      |
| 'I16'  | Int16Array   | -32,768 to 32,767                |
| 'I32'  | Int32Array   | -2,147,483,648 to 2,147,483,647  |
| 'F32'  | Float32Array | 1.2x10^-38 to 3.4x10^38          |