Skip to content
🎣 Declarative data fetching for React
JavaScript
Branch: next
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs chore(*): publish v1.0.0-beta.1 Sep 27, 2018
modules
scripts feat(*): switch to Babel 7️⃣ Oct 5, 2018
.eslintignore
.eslintrc
.flowconfig
.gitignore feat(FetchManager): initial implementation 🙌 Oct 6, 2018
.prettierrc
LICENSE
README.md
package.json
yarn.lock

README.md


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!

Installation

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.

Usage

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 (
      <Fetch
        loader={<Loader />} // Replace this with your lovely handcrafted loader
        url="https://api.github.com/users/octocat"
        timeout={5000}
      >
        {({ data }) => (
          <div>
            <h1>Username</h1>
            <p>{data.name}</p>
          </div>
        )}
      </Fetch>
    )
  }
}

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 🎣.

Docs

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

Todo

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?

About

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

You can’t perform that action at this time.