npm package: @react-vertex/shader-hooks
Description: React hooks for WebGL programs and shaders
Author: Steven Hall
Latest version: 1.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/shader-hooks`

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

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

React hooks for working with WebGL programs and shaders. More info on [WebGL Programs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLProgram) and [WebGL shaders](https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader).

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

#### Importing:

```js
import {
  useProgram,
  useShader,
} from '@react-vertex/shader-hooks'
```

## `useProgram(gl, vertSource, fragSource)` => `WebGLProgram`

React hook for creating a WebGL program.  It uses `useShader` internally so you likely only need to use this hook to setup a basic program. More info on [WebGL Programs](https://developer.mozilla.org/en-US/docs/Web/API/WebGLProgram).  The hook will warn on compile errors and provide debug information.  The program will also be deleted automatically when the containing component unmounts to conserve resources.

##### Arguments:

`gl`: A WebGL context.

`vertSource`: A string containing the vertex shader source or a compiled `WebGLShader` (see `useShader` below).

`fragSource`: A string containing the fragment shader source or a compiled `WebGLShader` (see `useShader` below).

##### Returns:

`program`: A [WebGLProgram](https://developer.mozilla.org/en-US/docs/Web/API/WebGLProgram).

##### Example Usage:

```js
import { useProgram } from '@react-vertex/shader-hooks'
import vert from './vert.glsl'
import frag from './frag.glsl'

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

## `useShader(gl, source, [isVertShader])` => `WebGLShader`

React hook for creating a WebGL shader. This is used internally by `useProgram` so you might not need it. This is useful if you want to compile your shaders higher up in your app. The hook will warn on compile errors and provide debug information.

##### Arguments:

`gl`: A WebGL context.

`source`: A string containing the shader source.

`isVertShader (optional)`: Boolean value that defualts to false.

##### Returns:

`shader`: A [WebGLShader](https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader).

##### Example Usage:

```js
import { useShader, useProgram } from '@react-vertex/shader-hooks'
import vert from './vert.glsl'
import frag from './frag.glsl'

...
  const vertShader = useShader(gl, vert, true) // compile shaders higher up in your app
  const fragShader = useShader(gl, frag)
...

// Then somewhere else in your app (same conext of course)...
...
  const program = useProgram(gl, vertShader, fragShader)
...
```