0.3.6 • Published 8 years ago
react-simple-fetcher v0.3.6
react-simple-fetcher
Simple data fetching for React.
npm install react-simple-fetcher --save
Usage
You can use it as a Render Prop Component or a Higher-Order Component.
Render Prop Component
import React from 'react';
import Fetcher from 'react-simple-fetcher';
class Post extends React.PureComponent {
handleFetch = () => {
return fetch(`https://jsonplaceholder.typicode.com/posts/${this.props.id}`).then(response => response.json());
}
render () {
return (
<Fetcher handler={this.handleFetch} render={({ fetching, title, body }) => (
<div>
{fetching ? (
'Loading...'
) : (
<div>
<h3>{title}</h3>
<p>{body}</p>
</div>
)}
</div>
)} />
);
}
}
export default Post;
Higher-Order Component
import React from 'react';
import { connectFetcher } from 'react-simple-fetcher';
const Post = ({ fetching, title, body }) => (
<div>
{fetching ? (
'Loading...'
) : (
<div>
<h3>{title}</h3>
<p>{body}</p>
</div>
)}
</div>
);
const handleFetch = props => {
return fetch(`https://jsonplaceholder.typicode.com/posts/${props.id}`).then(response => response.json());
};
export default connectFetcher(handleFetch)(Post);
License
MIT