Sometimes you need to create an npm package for a React component so it can be reused across different projects. For this, you need to organize the code properly:
- make React and TypeScript work together,
- ensure that changes in your component are immediately visible in a demo page (hot reload),
- build the final component as an npm package,
- publish the demo app so others can see how it works.
Packing a React component into a sharable npm module used to be annoying and difficult for me (shame on me). In the past, I used TSDX, but it hasn’t been updated for three years.
Then I tried building such a setup with Cursor AI, but it kept generating extremely random, messy, and buggy code. After that, I followed some YouTube tutorials, but they were overloaded with unnecessary details.
So finally, I came up with this blueprint, which includes:
- Minimal dependencies
-
Viteconfig for hot reload in the demo app, so changes in the package are reflected immediately -
Rollupconfiguration to build the module -
Viteconfig to build the demo app for production -
gh-pagesconfig to publish the example app
If you’re interested, you can try the code yourself:
Top comments (0)