A react hook for using the Streams API with the Fetch API to stream data from a server.
You can install this package from NPM:
npm add react-fetch-streamsOr with Yarn:
yarn add react-fetch-streamsFor 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>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.
You can expect this hook to work wherever the following APIs are supported:
Check browserslist.dev for an overview.
If you wish to contribute, please use the following guidelines: