Setting up an NPM package for React was always exhausting for me 😮💨
Long articles to follow, giant boilerplate repos with tools I never knew I need. It was too complex and overwhelming, even for an experienced dev such as myself. It shouldn't be this way.
So I've decided to finally fix React npm package development DX.
Introducing Create React UI Lib.
The Speedrun
Let's create a React.js component with TypeScript typings, Storybook docs, and publish it as NPM package.
Bootstrap the project by running this command:
npm create react-ui-lib@latest
Then open the project folder with your favorite editor, run npm start and get going!
When you're ready to share your library:
- Build the package:
npm run build - Open
package.json, update the description, your name, the repository, and take out"private": true. - Run
npm publish
And to share documentation on GitHub Pages:
- Build Storybook:
npm run build-storybook - Commit and push the
docsfolder. - Get your Pages going on GitHub.
And you're done! 😨
Demo
Here's a demo project bootstrapped with create-react-ui-lib:
As you can see, it has docs deployed to GitHub Pages. I told GitHub to take pages from docs folder and boom — it just works!
Let's Dive in
Hey there! I know the headache. If you're looking to create and share a React component library in 2023, it feels like you have to spend forever just to get started.
- Which bundler should I use?
- How do I get TypeScript to make typings for my components?
- How do I make a demo or documentation?
- How do I set up NPM?
And so on...
Right now, there's no quick way to create a UI component and share it without spending a lot of time on set up.
So I've made a CLI that bootstraps a minimalistic template so you can start working on your next UI React component library in seconds. I've also made a few choices for you, so you don't have to worry about the tools too much.
Let's review the tech.
Vite
I've picked Vite for bundling. It's quick and easy to set up. It also has a library mode to simplify bundling a library. For module types, I've specified ES and UMD — you probably won't need anything else. But if you do, you can check out Vite's docs.
TypeScript
There's no doubt you're going to use TS in your React UI library in modern age. It's already in Vite, and type definitions for your package are pulled to dist thanks to vite-plugin-dts, so no extra work is needed.
Storybook
The template already has Storybook set up. It's used as a development environment and as documentation for your library. It's built to a docs folder which is under git, so no extra effort is needed to share it on GitHub Pages.
Bring Your Own Tools
I made this template as unopinionated as possible not to bother you with tools you don't need or will most likely configure yourself.
- It doesn't come with pre-set ESLint.
- No styling library is included, pick the one you like.
- No pre-commit hooks. I think you should add them if and when you need them.
That said, I think including popular tools as options in CLI is a good idea. I'll wait for feedback and update the library as needed.
Let me know in the comments which tools you'd prefer to have pre-set. Styled Components or Tailwind? Maybe Reach or Radix? Or would you like ESLint with an AirBnb config? I'm all ears!
Give the project some stars on GitHub and feel free to create an issue.
If you liked the post, please hit reactions and subscribe.
Top comments (4)
I prefer Ladle (they use Vite and esbuild and aren't as overwhelmed by the extra toolkit, so it's very quick 🏎️), but good job anyway 👍🏻
Ladle appears to be a good alternative to Storybook. I might consider it as an option for Create React UI Library. Thank you for noting!
Nice library, thanks for it. As you mentioned, good to have cli options to specify using ESLint, or styling libraries during the setup. It simplifies the process, and give more zero-config convenience to the library.
nice guide btw, saved for the future