Skip to content
/ react-kindling Public template

πŸ”₯ A template to build, test, and share React components and hooks easily.

License

Notifications You must be signed in to change notification settings

justinmahar/react-kindling

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

A template to build, test, and share React components and hooks easily.

Β  View project on GitHubΒ  Deploy Status

Buy me a coffeeΒ Sponsor

Read the official documentation.

Overview

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.

Features include:

  • ✨ 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
  • And more!

Table of Contents

You can use Markdown All in One to keep your project's table of contents updated automatically. Highly recommended!

Quick Start

Click the button below to get started with React Kindling:

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.

Install dependencies

npm install

Title and URL

Update the site title in .storybook/theme.js.

Favicon

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.

Use Storybook to develop your components and hooks

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 modules from index.tsx

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.

Updater

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.

Automatic Deploy to GitHub Pages

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.

Markdown Pages

The following Markdown files are generated as Storybook pages by default:

README Template

The file README.template.md contains a template README. Just fill it out.

Using For Non-React Projects

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.

npm Publish Checklist

About to wrap up and publish to npm? Double-check the following:

  • No unwanted console.log calls
  • 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!

Publish to 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.

Celebrate!

You've done it! Your project is ready for the world.

Projects Using React Kindling

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 ↕️ React hooks for scrolling the page to any location, or by any amount. Supports smooth scrolling.
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: πŸ‘‰β­

License

See LICENSE.md.


Synchronized README Blocks

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.

Donate

If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!

Buy me a coffeeΒ Sponsor

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

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.

About

πŸ”₯ A template to build, test, and share React components and hooks easily.

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published