npm install react-fetch
url
: where to fetch json data fromonSuccess
: function on successfully fetching the dataonError
: function to be called on erroroptions
: object containing parameters for the request (see the fetch spec)
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>
);
}
Run this to view the example in example/dist
npm install
npm run build