🎣 Declarative data fetching for React
Branch: next
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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
.gitignore
.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

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!