react-fetch-with-progress v1.1.1

react-fetch-with-progress

A React Hook for fetching data with download progress tracking.

Installation

yarn add react-fetch-with-progress

or

npm i react-fetch-with-progress

Hook Reference

All-in-one hook

const { progress, eta, response, fetchWithProgress } = useFetchWithProgress();

Hook Returns

API Reference

fetchWithProgress(url, options?, callback?)

Parameters:

FetchWithProgressCallback

({ progress, eta }) => void | Parameter | Type | Description | |-----------|------|-------------| | progress | number | The current progress of the request as a percentage (0-100). | | eta | number | Estimated time remaining for the request to complete, in milliseconds. |

Returns:

Promise<Response> - Resolves to the fetch response object.

Example

// React function component:
export default function App() {
  const { progress, eta, response, fetchWithProgress } = useFetchWithProgress();

  const url = 'https://example.com/image.jpg';

  const handleFetchImage = () => {
    // Same as native `fetch`
    fetchWithProgress(url, {}, callback)
      .then(response => {
        console.log("Fetch complete!", response);
      })
      .catch((error) => {
        console.error("Fetch failed:", error);
      });
  };

  // Callback function to track the progress of the request.
  const callback = ({ progress, eta }) => {
    console.log(`Progress: ${progress}%`);
    console.log(`ETA: ${eta}ms`);
  }
  
  return (
    <div>
      <button onClick={handleFetchImage}>Fetch Image</button>
      <div>
        Loading progress: 
        <progress max="100" value={progress ?? 0} />
        {progress.toFixed(1)}%
      </div>
      <div>ETA: {(eta / 1000).toFixed(1)}s</div>
    </div>
  )
}