Naughty Programmer's Madness

    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:

    Install

    npm i react-fetch-streams

    DownloadsWeekly Downloads

    57

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    29.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • rolandjitsu