https://github.com/nickbullll/react-fetch-hoc
Simple React fetch high order component 🚴🏽
https://github.com/nickbullll/react-fetch-hoc
higher-order-component react react-hoc reactjs redux
Last synced: over 1 year ago
JSON representation
Simple React fetch high order component 🚴🏽
- Host: GitHub
- URL: https://github.com/nickbullll/react-fetch-hoc
- Owner: nickbullll
- License: mit
- Created: 2017-08-26T18:46:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-26T21:43:14.000Z (almost 9 years ago)
- Last Synced: 2025-03-06T03:47:20.659Z (over 1 year ago)
- Topics: higher-order-component, react, react-hoc, reactjs, redux
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Fetch HOC
=================
[](https://badge.fury.io/js/react-simple-fetch-hoc)
An experiment to quickly integrate and use an API requests with High Order Component 🚴🏽
#### The API might change any day.
#### Do not use in Production!
How to install ?
-----
`npm i -s react-simple-fetch-hoc`
What is it ?
-----
It's a simple library build on React High Order Components and on fetch (currently)
which assumes responsibility for receiving data from the server and transferring it to your component.
### Example
```
import React from 'react';
import fetch from 'isomorphic-fetch';
import fetchHoc from 'react-fetch-hoc';
const API_ROUTE = 'https://jsonplaceholder.typicode.com/posts';
const Post = ({ title, body }) => {
return (
{title}
{body}
)
}
const withFetchPost = fetchHoc(props => fetch(`${API_ROUTE}${props.id}`));
const PostContainer = withFetchPost(Post);
const App = ({ id = 1 }) =>
export default App;
```
The API get call to `https://jsonplaceholder.typicode.com/posts/1` will send us response as
```
{
title: 'Summer',
body: 'That summer was so fine that I dec...'
}
```
What problem does it solve ?
-----
Basically everyone is familiar with using fetch/axios in the `componentDidMount` method. This solution is not the cleanest of all. The concept built into this library allows us keep our components clean and just re-use them where necessary, changing only the shell.
FAQ ?
-----
### Feature Requests/Find Bug ?
If you see the potential in this library let's talk. Search for existing GitHub issues and join the conversation or create new!
### Can I use this in production?
I wouldn't. Many use cases are not be considered yet. If you find some use cases this lib can't handle yet, please file an issue.