Hooks

`useShader`

Like <Shader>, but you provide the markup:

import { useShader } from "@fluorite-studio/react";

const { state, error, backend, animated, containerRef, canvasRef, refresh } =
  useShader(id);
// attach containerRef to a positioned wrapper and canvasRef to a <canvas>

It takes the same options as <Shader> and returns:

Field	Type	Notes
`state`	`ShaderState`	See the states below
`error`	`ShaderError \| null`	Set when `state` is `"error"`
`backend`	`"webgpu" \| "webgl" \| null`	Which one is rendering
`animated`	`boolean`	Whether the shader changes over time
`containerRef`	`(el: HTMLElement \| null)`	Attach to the wrapper element
`canvasRef`	`(el: HTMLCanvasElement \| null)`	Attach to a `<canvas>`
`refresh`	`() => void`	Check for a new version now

States: idle, fetching, compiling, ready, paused (when play says not to run) and error.

`useShaderNode`

For React Three Fiber: gives you the shader to use in your own material. See the guide.

const { node, state, error, animated } = useShaderNode(id, {
  client,
  output,
});

Pass output to use one of the shader's named outputs instead of its main one.

Error codes

Errors are a ShaderError with a code and a retryable flag. Check the code, not the message.

Code	Meaning
`NOT_FOUND`	Not published, or no such version or shader
`NETWORK`	The request failed
`INVALID_GRAPH`	The graph could not be rendered
`UNSUPPORTED_SCHEMA`	The shader needs a newer version of the package
`UNSUPPORTED_DEVICE`	Neither WebGPU nor WebGL2 is available
`CONTEXT_LOST`	The GPU context was lost
`ASSET_FAILED`	A texture failed to load
`UNKNOWN`	Anything else

useShader

useShaderNode

Error codes

On this page

`useShader`

`useShaderNode`