2.0.0 • Published 4 years ago
react-read v2.0.0
react-read
Utility that enables Suspense for Data Fetching.
Usage
Install
yarn add react react-dom react-read
# or with NPM
npm install react react-dom react-read
Readable.create(object) => readable
If object
is a promise, calling readable.read()
in your render function will suspend rendering until the promise is resolved. The same is true for readable.value
.
https://codesandbox.io/s/snowy-framework-vuvp8
import React from 'react';
import ReactDOM from 'react-dom';
import { Readable } from 'react-read';
import { fetchUser } from './api';
const readable = Readable.create(fetchUser(1));
function App(props) {
const user = readable.read(); // or readable.value
return <h1>Hello {user.name}!</h1>;
}
function AppLoading() {
return <h1>Loading...</h1>;
}
ReactDOM.render(
<React.Suspense fallback={<AppLoading />}>
<App userId={1} />
</React.Suspense>,
document.getElementById('root'),
);
read(promise) => value
Read a promise
object. Same as Readable.create(promise).read()
.