React-simple-fetcher NPM

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);