Skip to content
Simple data fetching for React.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

react-simple-fetcher

Build Status npm version

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

You can’t perform that action at this time.