5 Best Open-Source HTTP Request Libraries for React (2024)

This article walks you through a list of the best open-source HTTP request libraries for React in 2023.

Axios

• GitHub stars: 104k+
• Weekly NPM download: 48m – 65m
• License: MIT
• Written in: Javascript, TypeScript
• Links: GitHub repo | NPM page | official website

Axios is a lightweight promise-based HTTP client that can help you send requests to servers with ease in React. It is extremely popular and loved by the vast majority of front-end developers. The library gains approximately 21 million weekly downloads via npm. It supports a wide range of browsers including the old folks like IE 11.

Example with Javascript:

import axios from axios;

/*...*/

const fetchData = async () => {
  try {
    const response = await axios.get("https://www.kindacode.com/");
    console.log(response);
  } catch (err){
    console.log(err);
  }
}

Example with TypeScript:

let user: User = null;
try {
  const { data } = await axios.get('/users/123');
  user = data.userDetails;
} catch (error) {
  if (axios.isAxiosError(error)) {
    handleAxiosError(error);
  } else {
    handleUnexpectedError(error);
  }
}

Super Agent

• GitHub stars: 16.5k+
• Weekly NPM download: 8.7m – 12.5m
• License: MIT
• Written in: Javascript, HTML, Makefile
• Links: GitHub repo | NPM page

In order to use this library with TypeScript, you need to install @types/superagent:

npm i @types/superagent

Superagent is a progressive client-side HTTP request library that supports many high-level HTTP client features. The browser-ready, minified version of this package is only 6KB (with gzipped).

Example:

import superagent from 'superagent';

/*...*/

superagent
      .post('/api/pet')
      .send({ name: 'Manny', species: 'cat' }) // sending POST data
      .set('X-API-Key', 'foobar')
      .set('accept', 'json')
      .end(function (err, res) {
         // working with err, res here
      });

Ky

• GitHub stars: 11k+
• Weekly NPM download: 1m – 1.5m
• License: MIT
• Written in: TypeScript (100%)
• Links: GitHub repo | NPM page

The name of the library only contains 2 characters, and its unpacked size is only 81.9 KB. Ky is a tiny and elegant HTTP client based on the browser Fetch API, with no dependencies. If your project focuses on users with modern browsers, then Ky is a great choice.

The library brings us many benefits over the plain Fetch API:

• Simpler API
• Method shortcuts (ky.post())
• Treats non-2xx status codes as errors (after redirects)
• Retries failed requests
• JSON option
• Timeout support
• URL prefix option
• Instances with custom defaults
• Hooks

Example:

import ky from 'ky';

const fetchData = async () => {
  const json = await ky('https://api.kindacode.com', {
	retry: {
		limit: 100,
		methods: ['get'],
		statusCodes: [413]
	}
  }).json();
}

Popsicle

• GitHub stars: 250+
• Weekly NPM download: 200k – 240k
• License: MIT
• Written in: TypeScript (100%)
• Links: GitHub repo | NPM page

Popsicle is an advanced HTTP request library. It can be used in React, Vue, Angular, or server-side Node.js without any configuration. There are 2 Popsicle great plugins: Popsicle Status (reject on invalid HTTP status codes) and Popsicle Retry (retry HTTP requests on bad server responses).

Example:

import { fetch, AbortController } from "popsicle";
 
const controller = new AbortController();
 
setTimeout(() => controller.abort(), 500);
 
const res = fetch("https://www.example.com", {
  signal: controller.signal
});

stream-http

• GitHub stars: 350+
• NPM weekly downloads: 9m – 11m
• License: MIT
• Written in: Javascript
• Links: GitHub repo | NPM page

If you want to implement features of Node’s native http module in React, then stream-http is the thing you need. In accordance with its name, stream-http tries to provide data to its caller before the request has been completed whenever possible.

Some common use cases:

• Start the request when the user focuses on an input field or a textarea, get all of the headers, then wait until the user presses submit the form before sending the data they entered.
• Gradually send data generated on the client like video, audio.

stream-http has to make some tradeoffs to support binary data and streaming. In general, it could make a reasonable decision about which underlying browser features to use, but sometimes the module needs to get a little input from the developer.

Conclusion

We’ve gone through the list of the best open-source HTTP request libraries for React. If you’d like to explore more new and interesting stuff in modern React and frontend development, take a look at the following articles:

• React: Get the Width & Height of a dynamic Element
• React + TypeScript: Handling onScroll event
• React + TypeScript: Handle onCopy, onCut, and onPaste events
• React + TypeScript: Working with Radio Button Groups
• React + TypeScript: Multiple Dynamic Checkboxes
• React + TypeScript: Handling Select onChange Event

You can also check our React category page and React Native category page for the latest tutorials and examples.