Readable Hook

React hooks for wrangling ReadableStreams.

Installation

npm i readable-hook --save

Usage

useStreamingQuery

constMyComponent: FC=()=>{const[{ value },triggerQuery]=useStreamingQuery("path/to/api/endpoint");return(<div>{value}<buttononClick={fetchStreamingData}/></div>);};

useStreamingMutation

Allows synchronizing state with a mutation endpoint that returns a streaming response. Has a few different ways to pass parameters (at init, and at mutation trigger).

constMyComponent: FC=()=>{const[{ value, isStreaming, done },triggerMutation]=useStreamingMutation("path/to/api/endpoint",{// params that can be passed during initialization},);return(<div>{value}<inputonSubmit={e=>triggerMutation({params: {inputValue: e.target.value,},onDone: ()=>console.log("Done streaming"),})}/></div>);};

useReadable

Allows synchronizing state with a ReadableStream. Check this for a full example.

constMyComponent: FC<{readableStream: ReadableStream}>=({ readableStream },)=>{const[{ value },synchronize]=useReadable(async()=>readableStream,100);return(<div>{value}<buttononClick={synchronize}/></div>);};

useIterable

Allows synchronizing state with an async Iterable. Check this for a full example.

asyncfunction*getIntegers(){letidx=0;while(true){if(signal?.aborted){break;}awaitdelay(100);idx+=1;yieldgetCharacters(idx).toString();}}constMyComponent=()=>{const[{ value },synchronize]=useIterable<string>(async(_,signal)=>getIntegers(signal),{accumulate: true,accumulator: (acc,curr)=>acc
? `${acc}${curr}`
: `${curr} `,delay: 100,},);return(<div>{value}<buttononClick={synchronize}/></div>);};