CLI for creating reusable React hooks using Rollup and create-react-app. Inspired by the amazing create-react-library
- Easy-to-use CLI
- Handles all modern JS features
- Bundles
cjs
andes
module formats - create-react-app for example usage and local dev
- Rollup for bundling
- Babel for transpiling
- Jest for testing
- Supports complicated peer-dependencies
- Optional support for TypeScript
- Sourcemap creation
This package requires node >= 4
, but we recommend node >= 8
.
npm install -g create-react-hook
create-react-hook
Answer some basic prompts about your module, and then the CLI will perform the following steps:
- copy over the template
- install dependencies via yarn or npm
- link packages together for local development
- initialize local git repo
Local development is broken into two parts (ideally using two tabs).
First, run rollup to watch your src/
module and automatically recompile it into dist/
whenever you make changes.
npm start # runs rollup with watch flag
The second part will be running the example/
create-react-app that's linked to the local version of your module.
# (in another tab)
cd example
npm start # runs create-react-app dev server
Now, anytime you make a change to your library in src/
or to the example app's example/src
, create-react-app
will live-reload your local dev server so you can iterate on your component in real-time.
npm publish
This builds cjs
and es
versions of your module to dist/
and then publishes your module to npm
.
Make sure that any npm modules you want as peer dependencies are properly marked as peerDependencies
in package.json
. The rollup config will automatically recognize them as peers and not try to bundle them in your module.
npm run deploy
This creates a production build of the example create-react-app
that showcases your library and then runs gh-pages
to deploy the resulting bundle.
Here are some example libraries that have been bootstrapped with create-react-hook
.
- use-suspense-today - Use React Suspense with any library
- use-typing-effect - React hook for "Human Typing" effect
- use-scroll-to-reveal - React hook for revealing content upon scroll
- use-interval - React hook for setting intervals properly
- react-indicative-hooks - Hooks for indicative validation library
- use-3d-effect - Hook for the 3D tilt card effect
- react-rxjs-hook - A useStore hook to be used in conjunction with react-rxjs
- use-pusher - Easy as hooks that integrate with the pusher-js library
- use-axios-hooks - Axios hook
- react-shortcuts-hook - Keyboards shortcuts
- use-auto-progress - Hook based on best practices for animated progress indicators
- use-marked-hook - Marked.js wrapper
- ... and maybe more!
Want to add yours to the list? Submit an issue.
MIT © Travis Fischer MIT © Herman Starikov