Read the official documentation.
This is a starter for React component and hook libraries.
React Kindling includes everything you need to build a React library including a standalone documentation site via GitHub Pages (see demo).
See the 10+ projects using React Kindling, and build your own.
- ✨ TypeScript support
- For type checking and safety.
- 📖 Storybook stories
- Use stories to visualize as you build.
- 👓 README template
- Just fill it out. Includes npm and deploy badges for street cred.
- 🌎 GitHub Pages pre-configuration
- Auto-deploy your Storybook documentation site to GitHub Pages with a single opt-in project config.
- 📦 Easy npm publish
- Build, version, and ship it to npm with one command:
npm run ship
- Build, version, and ship it to npm with one command:
- And more!
- Overview
- Table of Contents
- Quick Start
- Click the button below to get started with React Kindling:
- Install dependencies
- Title and URL
- Favicon
- Use Storybook to develop your components and hooks
- Export modules from
index.tsx - Updater
- Automatic Deploy to GitHub Pages
- Markdown Pages
- README Template
- Using For Non-React Projects
- npm Publish Checklist
- Publish to npm
- Celebrate!
- Projects Using React Kindling
- ⭐ Found It Helpful? Star It!
- License
- Synchronized README Blocks
- Donate
- TypeScript
- Icon Attribution
- Contributing
You can use Markdown All in One to keep your project's table of contents updated automatically. Highly recommended!
You will be prompted for a repo name and description, and GitHub will do the rest.
Note: This approach is recommended over cloning or forking because repositories created from a template start with a single commit and are not treated as forks, but instead as an entirely new project.
Then git clone your project once it's set up.
npm install
Update the site title in .storybook/theme.js.
Favicon files can be customized in the public directory. You can get a free one from favicon.io.
You must also update the links in .storybook/manager-head.html.
Storybook lets you develop your React components and hooks in isolation. Each "storybook" is a file that contains "stories", which are just the different visual states of your component or hook.
You can run Storybook using:
npm start
Your browser will automatically open to localhost:6006.
In src/stories, an example story is provided. Use this as a starting point for your own components.
You can add MDX files to this directory as well. These will become pages in Storybook and can be used for additional documentation.
Storybook will automatically generate documentation for your components using JSDoc comments.
Export anything you'd like to make available to the outside world in index.tsx.
These will be the modules that can be imported from your npm package after it's installed.
This project uses LockBlocks for updater support. This keeps boilerplate in sync with the main react-kindling starter.
To update, make sure your working directory is clean and run:
npm run update
Changes will be logged to lockblocks.log.
With zero config, your Storybook documentation is auto-deployed to GitHub Pages.
A GitHub Action has already been configured for you in .github/deploy.yml.
When pushing to GitHub, the action will build and deploy your Storybook static site for you automatically. 🎉
Simply open your repo's project Settings, select Pages, choose Deploy from a branch, and select the gh-pages branch / (root), and click Save.
Links to your Storybook site and deploy status are available in the template README. If this is your first deploy, it can take up to 10 minutes for your GitHub Pages site to show up.
The following Markdown files are generated as Storybook pages by default:
The file README.template.md contains a template README. Just fill it out.
This starter can be used to publish non-React specific projects, too. In order to do this, you'll want to make sure the included React peer dependencies are removed.
You can add the following script to package.json to remove them automatically when running the updater:
"postupdate": "node remove-peer-deps.js"This script will remove all peerDependencies from package.json for you.
About to wrap up and publish to npm? Double-check the following:
- No unwanted
console.logcalls - Code is fully documented
- All components render properly in Storybook
- Most important: Components and hooks are exported from
src/index.tsx- If you forget to export, none of your hard work will be available via npm!
When you're finished developing, you can easily ship it to npm with one command. Once published to npm, others can install and use your package with npm install.
If you haven't already, log into npm:
npm login
Then publish with a single command:
npm run ship
This command will build your project, add/commit the freshly built dist directory, increment the package version, publish to npm, and push to GitHub.
If you have any unsaved changes, this script will immediately fail until your working directory is clean.
You've done it! Your project is ready for the world.
The following projects were built on React Kindling:
| Name | Description |
|---|---|
| easyjre | ☕ Easily create an OpenJDK JRE using jlink! |
| react-social-media-embed | 📰 Easily embed social media posts from Facebook, Instagram, LinkedIn, Pinterest, TikTok, Twitter, and YouTube in React. |
| react-use-precision-timer | ⏱️ A versatile precision timer hook for React. Doubles as a stopwatch. |
| react-html-props | ⚛️ Convenient TypeScript types for all React HTML props. |
| github-projectv2-csv-exporter | 📂 Export GitHub project cards as CSV files. Uses the ProjectV2 API. |
| gumroad-api-tester | 🌀 A web tool for easily testing the Gumroad API. |
| articulate-nlg | 💬 A natural language generator (NLG) that articulates concepts as words, phrases, and sentences. |
| react-super-seo | 🔱 React SEO component that handles metadata so you don't have to. Supports Google, OpenGraph, Twitter, and beyond. |
| react-timed-image | 🎆 React image component that re-renders at timed intervals. Includes optional cache busting. |
| react-use-window-scroll | |
| random-seed-weighted-chooser | 🎲 A random weighted item chooser with custom seed option for JS. |
| react-use-query-param-string | 🔡 React hook for easily getting and setting query param strings. |
| lockblocks | 🔄 Node.js utility for updating projects created from starters. |
| react-uncached-image | 🌅 React image component that bypasses caching using query param cache busting. |
| react-timed-renderer | ⏳ React component that re-renders at the interval provided. |
| react-build-status-badge | 🚥 React build status badge component for any CI/CD service. Shows real-time status and supports Markdown for easy setup. |
| simple-form-submit | ✅ Submit your form data with a simple JavaScript call. |
| react-sub-unsub | 🔔 Manage React effect listeners with ease. |
| react-storage-complete | 🗄️ React hooks for accessing localStorage and sessionStorage, with syncing and prefix support. The complete package. |
⭐ Found It Helpful? Star It!
If you found this project helpful, let the community know by giving it a star: 👉⭐
See LICENSE.md.
The following sections of the README are synchronized with projects generated from this starter using the included updater.
These sections are included for you in the README template. You can remove the [lock][/lock] tags around them to stop them from syncing with the starter.
If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!
Type definitions have been included for TypeScript support.
Favicon by Twemoji.
Open source software is awesome and so are you. 😎
Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.
For major changes, open an issue first to discuss what you'd like to change.