react-fetch-streams
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

react-fetch-streams

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

npm GitHub Workflow Status Coveralls Github Branch

Table of Contents

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:

Check browserslist.dev for an overview.

Contribute


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

Package Sidebar

Install

npm i react-fetch-streams

Weekly Downloads

197

Version

1.1.2

License

MIT

Unpacked Size

29.8 kB

Total Files

12

Last publish

Collaborators

  • rolandjitsu