🎣 Declarative data fetching for React
Branch: next
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci feat(*): upgrade to React 16.4.2 & setup Prettier 🎨 Aug 18, 2018
docs chore(*): publish v1.0.0-beta.1 Sep 27, 2018
modules refactor(Fetch): remove inexisting data structure from printError 👋 Oct 6, 2018
scripts feat(*): switch to Babel 7️⃣ Oct 5, 2018
.eslintignore docs(*): minor changes ✍️ Mar 16, 2018
.eslintrc feat(*): implement new context API ⚛️ Aug 20, 2018
.flowconfig feat(FetchManager): initial implementation 🙌 Oct 6, 2018
.prettierrc feat(*): upgrade to React 16.4.2 & setup Prettier 🎨 Aug 18, 2018
LICENSE feat(*): rewrite a lot of things & add some features Mar 4, 2018
README.md chore(*): publish v1.0.0-beta.1 Sep 27, 2018
package.json feat(*): switch to Babel 7️⃣ Oct 5, 2018
yarn.lock feat(*): switch to Babel 7️⃣ Oct 5, 2018


Declarative data fetching for React 🎣

build: CircleCI coverage: Coveralls version: next gzip size code style module formats: umd, cjs, esm

react-data-fetching provides a very intuitive way to perform any REST API call without hassle, through a single React component. It also helps you take care of timeouts, loading states, errors handling, data saving, uploading/downloading progress, etc. Fetching data while letting the user know what's going on has never been that easy!

The package is quite lightweight (~7 kB gzipped) and has been built from the ground up with universal apps in mind: you can use it wherever React is rendering - meaning it works seamlessly with React (web) & React Native!


Using Yarn:

$ yarn add react-data-fetching@next

Then, use it as you would with anything else:

// using ES6 modules
import { Fetch } from 'react-data-fetching'

// using CommonJS modules
var Fetch = require('react-data-fetching').Fetch

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-data-fetching/umd/react-data-fetching.min.js"></script>

You can find the library on window.ReactDataFetching.


The following illustrates the simplest way to use react-data-fetching:

import React, { Component } from 'react'
import { Fetch } from 'react-data-fetching'

import { Loader } from './components'

export default class App extends Component {
  render() {
    return (
        loader={<Loader />} // Replace this with your lovely handcrafted loader
        {({ data }) => (

The package gives access to <Fetch>, <FetchProvider> and requestToApi(). To have an in-depth explanation of how to use them, how they work and even more, head to this post: Introducing React Data Fetching 🎣.


The documentation is available here: https://react-data-fetching.now.sh.


Want to submit a PR but don't know where to start? Here is a list of features you could consider! This might change in the future as the API is far from being complete.

  • Add compatibility to React 16.3.0+ lifecycles ⚛️
  • Implement React 16.3.0+ new context API ⚛️
  • Add an /examples folder for newcomers & contributors 📂
  • Add the ability to run multiple fetches serially or in parallel
  • Implement a caching system (through React's Suspense?) 📥
  • What else?


react-data-fetching is currently developed and maintained by yours truly, @Charles_Mangwa. Feel free to get in touch if you want to contribute!