https://github.com/rolandjitsu/react-fetch-streams
React hook for the Streams API.
https://github.com/rolandjitsu/react-fetch-streams
fetch-api javascript react react-hook streams-api
Last synced: 3 months ago
JSON representation
React hook for the Streams API.
- Host: GitHub
- URL: https://github.com/rolandjitsu/react-fetch-streams
- Owner: rolandjitsu
- License: mit
- Created: 2020-11-21T02:25:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T00:11:12.000Z (over 1 year ago)
- Last Synced: 2025-04-05T11:35:38.660Z (3 months ago)
- Topics: fetch-api, javascript, react, react-hook, streams-api
- Language: JavaScript
- Homepage: https://rolandjitsu.github.io/react-fetch-streams/
- Size: 217 KB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-fetch-streams
> A react hook for using the [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) with the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to stream data from a server.
[](https://www.npmjs.com/package/react-fetch-streams)
[](https://github.com/rolandjitsu/react-fetch-streams/actions?query=workflow%3ATest)
[](https://coveralls.io/github/rolandjitsu/react-fetch-streams?branch=master)
# Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Browser Support](#browser-support)
* [Contribute](#contribute)
### Installation
----------------
You can install this package from [NPM](https://www.npmjs.com):
```bash
npm add react-fetch-streams
```
Or with [Yarn](https://yarnpkg.com/en):
```bash
yarn add react-fetch-streams
```
#### CDN
For CDN, you can use [unpkg](https://unpkg.com):
[https://unpkg.com/react-fetch-streams/dist/index.min.js](https://unpkg.com/react-fetch-streams/dist/index.min.js)
The global namespace for react-fetch-streams is `reactFetchStreams`:
```html
const {useStream} = reactFetchStreams;
...
```
### Usage
---------
Stream some data from some server:
```jsx
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 (
{data.myProp}
);
};
```
You can also pass the fetch request init props using `fetchParams`:
```jsx
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 (
{data.myProp}
);
};
```
For more examples, please check the [tests](./src/stream.test.js).
### Browser Support
-------------------
You can expect this hook to work wherever the following APIs are supported:
* [File API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility)
* [Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API#Browser_compatibility)
* [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController#Browser_compatibility)
* [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal#Browser_compatibility)
Check [browserslist.dev](https://bit.ly/3lSuUsQ) for an overview.
### Contribute
--------------
If you wish to contribute, please use the following guidelines:
* Use [Conventional Commits](https://conventionalcommits.org)