search
/
·
Intro
expand_more
Guides
·
Getting started
·
WebGPU canvas
·
Drawing and animation
·
Scene geometry
·
2D and 3D plot
·
Data-driven geometry
·
Live vs React
·
Memoization
·
WGSL Shaders
·
Renderers and Passes
·
Layout and UI
·
Background
·
Roadmap
·
Contributing
Reference
chevron_right
Components
chevron_right
Libraries
expand_more
Live/React
expand_more
@use-gpu/live
phishing
useAwait
phishing
useCallback
phishing
useCapture
phishing
useContext
phishing
useDouble
phishing
useFiber
phishing
useFiberId
phishing
useHooks
phishing
useLog
phishing
useMemo
phishing
useNoAwait
phishing
useNoCallback
phishing
useNoCapture
phishing
useNoContext
phishing
useNoDouble
phishing
useNoHooks
phishing
useNoMemo
phishing
useNoOne
phishing
useNoRef
phishing
useNoResource
phishing
useNoState
phishing
useNoVersion
phishing
useOne
phishing
useRef
phishing
useResource
phishing
useState
phishing
useVersion
east
capture
east
Capture
east
compareFibers
east
createElement
east
debug
east
deprecated
east
detach
east
extend
east
fence
east
Fence
east
formatArrayLike
east
formatNode
east
formatNodeName
east
formatNumber
east
formatShortValue
east
formatSnapshot
east
formatSnapshotArg
east
formatTree
east
formatValue
east
fragment
east
Fragment
east
gather
east
Gather
east
hot
east
imperative
east
incrementVersion
east
into
east
isSameDependencies
east
isSubNode
east
keyed
east
makeCapture
east
makeContext
east
makeImperativeFunction
east
makeReconciler
east
mapReduce
east
MapReduce
east
memo
east
memoArgs
east
memoProps
east
morph
east
Morph
east
multiGather
east
MultiGather
east
mutate
east
provide
east
Provide
east
Quote
east
quoteTo
east
Reconcile
east
reconcileTo
east
render
east
renderAsync
east
renderOnPaint
east
renderSync
east
renderWithDispatch
east
resolveRootNode
east
setLogging
east
Signal
east
signalTo
east
suspend
east
Suspend
east
tagFunction
east
traverseFiber
east
unmount
east
unquote
east
Unquote
east
use
east
wrap
east
yeet
east
Yeet
data_object
default
data_object
JSX
data_object
React
title
ArrowFunction
title
Component
title
ContextRoots
title
ContextValues
title
DeferredCall
title
DeferredCallInterop
title
DoubleState
title
FiberContext
title
FiberGather
title
FiberMap
title
FiberQueue
title
FiberQuote
title
FiberQuotes
title
FiberSetter
title
FiberYeet
title
FunctionCall
title
HostInterface
title
Initial
title
Key
title
LC
title
LiveCapture
title
LiveComponent
title
LiveContext
title
LiveElement
title
LiveEnvironment
title
LiveFiber
title
LiveFunction
title
LiveMap
title
LiveNode
title
LivePure
title
LiveReconciler
title
LoggingOptions
title
MakeContext
title
MaybeTask
title
MutableRefObject
title
OnFiber
title
PropsWithChildren
title
PropsWithMarkup
title
RawLiveComponent
title
ReactElementInterop
title
Reducer
title
Ref
title
RefObject
title
RenderCallbacks
title
RenderOptions
title
RenderProp
title
Resource
title
Setter
title
Task
format_list_bulleted
Hook
chevron_right
@use-gpu/state
chevron_right
@use-gpu/traits
chevron_right
Loaders
chevron_right
Development

inventory_2 @use-gpu/live

npm install --save @use-gpu/live
yarn add @use-gpu/live

Docs: https://usegpu.live/docs/reference-live-@use-gpu-live

Live - Reactive Effect Run-time

Live is a reimplementation of the React <Component> tree and its hook system. It allows you to use popular reactive patterns to write code beyond UI widgets.

It's built to serve as the reactive core of Use.GPU, but there is nothing GPU- or graphics-specific about it.

Unlike React, Live does not produce an output DOM. Components can only render other components, or yield values back to parents.

Live is designed to play nice with real React, but shares no code with it.

Non-React extensions:

  • No-Hooks - Use if/else with hooks safely.
  • Continuations - Parents can run more code after children have rendered.
  • Context captures - Context providers in reverse. Parent gathers values sparsely from a sub-tree.
  • Yeet-Reduce - Gather values with incremental map-reduce along an entire sub-tree.
  • Quote and Reconcile - Reconcile components into new sub-trees incrementally (aka react-react).
  • Morph - Parents can change Component type without unmounting all children.
  • Detach - Parent can decide when to dispatch render to children.

Modules

  • @use-gpu/live is the main effect run-time
  • @use-gpu/react contains extra React interoperability components
  • @use-gpu/inspect is an interactive inspector/debugger for Live, built using React

Colofon

Made by Steven Wittens. Part of @use-gpu.

menu
format_list_numbered