0.2.0 • Published 5 years ago
@jomaxx/create-loader v0.2.0
create-loader
Data Fetching for React Suspense
Install
# npm
npm install --save @jomaxx/create-loader react
# yarn
yarn add @jomaxx/create-loader react
Usage
https://codesandbox.io/s/wispy-architecture-c7f4w
import React from "react";
import ReactDOM from "react-dom";
import { createLoader } from "@jomaxx/create-loader";
const [LoadUser, useUser] = createLoader(
// fetch json from api
({ id }) => fetch(`/api/users/${id}`).then(response => response.json()),
// reload when id changes
({ id }) => [id]
);
function Greetings() {
const user = useUser(); // gets user from context
return <h1>Hello {user.name}!</h1>;
}
function App() {
return (
// shows fallback while user is loading
<React.Suspense fallback={<h1>Loading...</h1>}>
<LoadUser id={2}>
<Greetings />
</LoadUser>
</React.Suspense>
);
}
ReactDOM.render(<App />, document.getElementById("root"));