tauseefk/readable-hook

React hook for wrangling ReadableStream

Readable Hook

React hooks for wrangling ReadableStreams.

Installation

npm i readable-hook --save

Usage

useStreamingQuery

const MyComponent: FC = () => {
    const [{ value }, triggerQuery] = useStreamingQuery('path/to/api/endpoint');
    return (
        <div>
            {value}
            <button onClick={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).

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

useReadableHook

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

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