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!
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
.
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 🎣.
The documentation is available here: https://charlesmangwa.github.io/react-data-fetching.
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!