hoodwink73/react-data-fetching

Declarative data fetching for React

Declarative data fetching for React 🎣

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 really lightweight (~6 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

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://charlesmangwa.github.io/react-data-fetching.

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.

• Increase code coverage 🤓
• Implement React 16.3.0 new context API & lifecycles ⚛️
• Add the ability to make several calls at once / manage a queue ⛓
• Implement a caching (and/or normalization) system (through React.Suspense?) 📥
• Add GraphQL support? ✨
• Add an /example folder for newcomers & contributors 📂
• 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!