https://github.com/CharlesMangwa/react-data-fetching

🎣 Declarative data fetching for React.
https://github.com/CharlesMangwa/react-data-fetching

api component fetch react react-native

Last synced: 5 days ago
JSON representation

🎣 Declarative data fetching for React.

• Host: GitHub
• URL: https://github.com/CharlesMangwa/react-data-fetching
• Owner: CharlesMangwa
• License: mit
• Created: 2017-11-24T13:13:28.000Z (almost 7 years ago)
• Default Branch: next
• Last Pushed: 2019-05-08T16:41:10.000Z (over 5 years ago)
• Last Synced: 2024-10-30T05:56:40.578Z (11 days ago)
• Topics: api, component, fetch, react, react-native
• Language: JavaScript
• Homepage: https://react-data-fetching.now.sh
• Size: 1.4 MB
• Stars: 490
• Watchers: 8
• Forks: 27
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - react-data-fetching

README

        


  

    

  








  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 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](https://yarnpkg.com/):

```shell

$ yarn add react-data-fetching@next

```

Then, use it as you would with anything else:

```js

// 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](https://unpkg.com):

```html

```

You can find the library on `window.ReactDataFetching`.

## Usage

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

```jsx

import React, { Component } from 'react'

import { Fetch } from 'react-data-fetching'

import { Loader } from './components'

export default class App extends Component {

  render() {

    return (

      } // Replace this with your lovely handcrafted loader

        url="https://api.github.com/users/octocat"

        timeout={5000}

      >

        {({ data }) => (

          


            
Username

            
{data.name}

          

        )}

      

    )

  }

}

```


The package gives access to ``, `` 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 🎣](https://medium.com/@CharlesMangwa/introducing-react-data-fetching-2140a1d36cc8).

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

- [x] Add compatibility to React 16.3.0+ lifecycles ⚛️

- [x] 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](https://twitter.com/Charles_Mangwa). Feel free to get in touch if you want to contribute!