react-fetch-streams

react-fetch-streams

A react hook for using the Streams API with the Fetch API to stream data from a server.

Table of Contents

• Installation
• Usage
• Browser Support
• Contribute

Installation

You can install this package from NPM:

npm add react-fetch-streams

Or with Yarn:

yarn add react-fetch-streams

CDN

For CDN, you can use unpkg:

https://unpkg.com/react-fetch-streams/dist/index.min.js

The global namespace for react-fetch-streams is reactFetchStreams:

<script type="text/javascript" src="https://unpkg.com/react-fetch-streams/dist/index.min.js"></script>

<script type="text/javascript">
    const {useStream} = reactFetchStreams;
    ...
</script>

Usage

Stream some data from some server:

import React, {useCallback, useState} from 'react';
import {useStream} from 'react-fetch-streams';

const MyComponent = props => {
    const [data, setData] = useState({});
    const onNext = useCallback(async res => {
        const data = await res.json();
        setData(data);
    }, [setData]);
    useStream('http://myserver.io/stream', {onNext});

    return (
        <React.Fragment>
            {data.myProp}
        </React.Fragment>
    );
};

You can also pass the fetch request init props using fetchParams:

import React, {useCallback, useState} from 'react';
import {useStream} from 'react-fetch-streams';

const fetchParams = {mode: 'cors'}

const MyComponent = props => {
    const [data, setData] = useState({});
    const onNext = useCallback(async res => {
        const data = await res.json();
        setData(data);
    }, [setData]);
    useStream('http://myserver.io/stream', {onNext, fetchParams});

    return (
        <React.Fragment>
            {data.myProp}
        </React.Fragment>
    );
};

For more examples, please check the tests.

Browser Support

You can expect this hook to work wherever the following APIs are supported:

• File API
• Streams API
• AbortController
• AbortSignal

Check browserslist.dev for an overview.

Contribute

If you wish to contribute, please use the following guidelines:

• Use Conventional Commits