βThere is no terror in the bang, only in the anticipation of it.β
β Alfred Hitchcock
Hitchcock
Hitchcock is a debugging tool for React Suspense. It wraps your calls to React.lazy()
and react-cache's createResource()
and let you pause, delay or invalidate them.
If you like this project consider backing my open source work on Patreon!
And follow @pomber on twitter for updates.
π¨ EXPERIMENTAL π¨
Use this only for experimenting with the new React API. Hitchcock is inefficient and unstable. Also, I have no idea what I'm doing.
Demos
- Movies: A clone of @karl clone of @dan_abramov demo
- Suspensify: A clone of the suspense demo from Jared Palmer's React Conf talk.
The code is in the examples folder.
Usage
Try it in CodeSandbox
Add the dependency:
$ yarn add hitchcock
Import lazy
and createResource
from hitchcock
(instead of importing them from react
/react-cache
):
import {
lazy,
unstable_createResource as createResource,
Director
} from "hitchcock";
Also import the Director
component, and add it somewhere in your app:
function YourApp() {
return (
<Director>
<YourStuff />
</Director>
);
}
Then use lazy
and createResource
.
Gotchas
- Try to always use the second parameter of
createResource
. - I'm doing an ugly hack to get the component name from the
lazy()
call. Please, create an issue if it shows the wrong name.
Contributing
$ git clone git@github.com:pomber/hitchcock.git
$ cd hitchcock
$ npx lerna bootstrap
Run the examples:
$ yarn start:example movies
$ yarn start:example suspensify
Publish new version:
$ yarn build:packages
$ npx lerna publish
License
Released under MIT license.