React
Getting started with libZL and React.
Installing
As well as providing the vanilla LibZL library, also available is a React wrapper that brings with it various shortcuts and utils for those using the popular UI framework.
npm install @zerolight-core/libzl @zerolight-core/libzl-react --save
The demo below assumes the following items have already been imported:
import LibZL from "@zerolight-core/libzl";
import { ZLBolt,
ZLBoltStreamContainer,
useZLBolt,
useZLBoltStreamState,
useZLBoltOptions,
StreamConnectionState} from "@zerolight-core/libzl-react";
Hooks
The libzl-react library includes various ready made hooks which makes it easy to write neat components
with minimal local state management. The demo below uses useZLBoltStreamState
to provide a button to connect/disconnect.
We will re-use this for further demos later.
Basic connection example
Here the options structure is injected for you into defaultDemoOptions
, but see here for example config, or here for more details.
We're using the connect widget here to stop the demo from spamming the service during editing, but in your application, you can connect automatically by adding a connect attribute to the ZLBolt object like this:
<ZLBolt zlbolt={zlbolt} options={defaultDemoOptions} connect>
Try it above to see how ZLBolt then automatically connects.
Provisioning for this demo is light so there may be some delays getting a stream.