Skip to content
The Master of Suspense 🍿
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
packages/hitchcock v0.4.1 Nov 1, 2018
.gitignore Half migration to lerna Oct 30, 2018
lerna.json
license
netlify.toml
package.json
readme.md
yarn.lock

readme.md

“There is no terror in the bang, only in the anticipation of it.”

— Alfred Hitchcock

Hitchcock npm version

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

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.

You can’t perform that action at this time.