readable-hook

Readable Hook

React hooks for wrangling ReadableStreams.

$3

``
npm i readable-hook --save
`

$3

#### useStreamingQuery

`Typescript
const MyComponent: FC = () => {
const [{ value }, triggerQuery] = useStreamingQuery("path/to/api/endpoint");
return (



);
};
`

#### 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).

`Typescript
const MyComponent: FC = () => {
const [{ value, isStreaming, done }, triggerMutation] = useStreamingMutation(
"path/to/api/endpoint",
{
// params that can be passed during initialization
},
);
return (



);
};
`

$3

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

`Typescript
const MyComponent: FC<{ readableStream: ReadableStream }> = (
{ readableStream },
) => {
const [{ value }, synchronize] = useReadable(async () => readableStream, 100);
return (



);
};
`

$3

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

`Typescript
async function* getIntegers() {
let idx = 0;

while (true) {
if (signal?.aborted) {
break;
}
await delay(100);
idx += 1;
yield getCharacters(idx).toString();
}
}

const MyComponent = () => {
const [{ value }, synchronize] = useIterable(
async (_, signal) => getIntegers(signal),
{
accumulate: true,
accumulator: (acc, curr) =>
acc
? ${acc}${curr}
: ${curr} ,
delay: 100,
},
);

return (



);
};
``