async-react-future - import * from './future' today!
A compilation of everything everyone is doing with Async React, for easy demoing and experimentation.
WARNING: THIS IS NOT TO BE USED FOR PRODUCTION
This library helps people experiment with Async React as explored by the community.
See it in action
Non Suspense Demo Clones
Simple movie demo clone - no Suspense, no react-loadable
Movie demo clone - no Suspense, with react-loadable
Full movie demo clone - with Suspense
Install
npm install --save async-react-future
API Documentation
Note: all of the below must be used inside ReactDOM's coming <AsyncMode>
.
./future
Dan Movie Demo Components
Placeholder
Placeholder component from Dan's demo
This is a simple wrapper for Timeout; frankly if you know Timeout well you don't have to use this.
You want one of these above any suspending you're going to do.
Props
const delayMs = 1 // note that react has hardcorded expirations at 1s and 5s fallback = 'Loading' // any jsx here will do children // required} = props;
Usage Example
; // later... <Placeholder delayMs=1000 fallback=<div className="Spinner" />> /* stuff with suspenders in here */ </Placeholder>
Component
new React.Component from Dan's demo
Just adds deferSetState to React.Component, which passes things through ReactDom.deferredUpdates before setting component state
Props
N/A
Usage Example
; state = showDetail: false ; { this; }; { // use this.handleClick somewhere }
Img
Img component from Dan's demo
Suspends image fetching. pretty much.
Props
const src // required alt = '' // probably required ...rest} = props;
Usage Example
; // later<Img src=src alt="poster" />
Misc components
Never
Never component from Suspense test
Throws a promise that resolves after some arbitrarily large number of seconds. The idea is that this component will never resolve. It's always wrapped by a Timeout.
Source: https://github.com/acdlite/react/blob/7166ce6d9b7973ddd5e06be9effdfaaeeff57ed6/packages/react-reconciler/src/tests/ReactSuspense-test.js#L558
Props
N/A
Usage Example
; { return <Timeout ms=ms> { if didTimeout // Once ms has elapsed, render null. This allows the rest of the // tree to resume rendering. return null; return <Never />; } </Timeout> ;}
Delay
Delay component from Suspense test
Delay a render of peer components by ms
milliseconds. Can be used to debounce, for example. Once ms has elapsed, render null. This allows the rest of the tree to resume rendering.
Source: https://github.com/acdlite/react/blob/7166ce6d9b7973ddd5e06be9effdfaaeeff57ed6/packages/react-reconciler/src/tests/ReactSuspense-test.js#L558
Props
N/A
Usage Example
;; { return <Fragment> <Delay ms=ms /> <Text text=text /> /* defined elsewhere */ </Fragment> ;}
LowPriority
LowPriority component from Peggy's ReactEurope demo
Defers (makes low priority) prop changes to its children through manipulating a value
prop on a stateKey
.
from https://github.com/peggyrayzis/react-europe-apollo
Props
const stateKey // required, string value // required, any children // function as a child, gets the deferred props passed to LowPriority} = thisprops;
Usage Example
; // later<LowPriority stateKey="selectedDog" value=thisstateselectedDog> /* not deferred */ // deferred <Timeout ms=2000> expired && selectedDog ? <Loading /> /* defined elsewhere */ : <Photo breed=selectedDog /> /* defined elsewhere */ </Timeout> </LowPriority>
./mockapi
Raw Data
Raw movie data to make demo clones
- moviesOverview (array of movie objects)
- movieDetailsJSON (an object map of movie id: movie detail object)
- movieReviewsJSON (an object map of movie id: movie review object)
Usage Example
movieDemo: MovieListPage } from 'async-react-future'; // later<MovieListPage onMovieClick=handleMovieClick /* defined elsewhere */ loadingId=currentId /* defined elsewhere */ moviesOverview=moviesOverview/>
Fetch Data
Async wrappers with delays for the raw data
- fetchMovieList
- fetchMovieDetails
- fetchMovieReviews
Usage Example
mockapi: fetchMofetchMovieReviewsvieList movieDemo: MovieListPage } from 'async-react-future'; const movieReviewsFetcher = ; { const reviews = movieReviewsFetcher; return <div className="MovieReviews">reviews</div>;}
Utilities
Just a delay
function for now
Usage Example
const fetchMovieDetails = async { await ; return movieDetailsJSONid;};
./movieDemo
Styled components that help to rapidly recreate demo clones and minimize code people have to dig through.
Pages
MovieListPage
A MovieListPage
A MovieListPage
Usage Example
movieDemo: MovieListPage } from 'async-react-future'; // later<MovieListPage onMovieClick=handleMovieClick /* defined elsewhere */ loadingId=currentId /* defined elsewhere */ moviesOverview=moviesOverview/>
The rest of this documentation is yet to be completed.
Utilities
Spinner
A simple Spinner
A simple css spinner that always spins, pass size={'large'}
for 2x size
Usage Example
movieDemo: Spinner } from 'async-react-future'; // later... <Placeholder delayMs=1000 fallback=<Spinner />> /* stuff with suspenders in here */ </Placeholder>
Attribution
I have studied a lot of people's code and you are likely to see shades of your code pop up here and there. I don't claim any rights at all to any of this. I'll try to attribute as many people as possible but apologies in advance if I forgot to include you.
- https://github.com/BenoitZugmeyer/react-suspense-demo for much of the
./future
API - https://medium.com/@pete_gleeson/creating-suspense-in-react-16-2-dcf4cb1a683f for
Loading
- https://github.com/pomber/hitchcock/blob/master/src/cache.js for cache
Library was bootstrapped with: https://github.com/transitive-bullshit/create-react-library
License
MIT © sw-yx