All Projects → Legitcode → react-fetch

Legitcode / react-fetch

Licence: other
Component wrapper for isomorphic-fetch, passes response to children

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

React Fetch

Install

npm install react-fetch

Props

  • url: where to fetch json data from
  • onSuccess: function on successfully fetching the data
  • onError: function to be called on error
  • options: object containing parameters for the request (see the fetch spec)

Example

pass an api endpoint and the resulting object will be passed as a prop.

import React from "react";
import Fetch from "react-fetch";

function App() {
  const handleError = (error) => console.log(error);
  const handleSuccess = (data) => console.log(data);

  return (
    <Fetch
      url="http://httpbin.org/headers"
      onSuccess={handleSuccess}
      onError={handleError}
    >
      <UserAgent />
    </Fetch>
  );
}

function UserAgent(props) {
  return (
    <div>
      {props.headers ? (
        <div>Your User-Agent: {props.headers["User-Agent"]}</div>
      ) : (
        "Loading ..."
      )}
    </div>
  );
}

Rebuilding

Run this to view the example in example/dist

npm install
npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].