So you are a React developer, and you've got a wonderful idea 💡, which you want to share with the React open-source universe? The challenge starts when you search for templates or any other bootstrapping tools for this goal. Site and app developers have a variety of choices: , Gatsby, and Electron. But we, library devs, are getting almost none of this. Next.js From my experience developing an internal design library for a huge e-commerce company, I came up with a list of features React library setup has to support: CommonJS and ES Modules bundling; Typescript support and proper declaration emitting; Various style architectures support (CSS modules, Styled Components, Tailwind etc.); Automated code quality checks for code and style; Unit testing; Documentation and component playground tool — Storybook; CI/CD setup to check PRs and do releases. This set of features covers such use cases from creating a small hook package to maintaining a huge React components design library. So that's how I came up with the . React Library Template — is a repository that contains all required bootstrap configurations to quickstart library development using the most modern tools. You don't have to spend hours configuring and fixing various problems, just clone the repo and start creating. React Library Template Set up You need to have >=18.x and installed. I've chosen pnpm because it works multiple times faster than yarn. Node pnpm The easiest way to install pnpm is to run this command: corepack prepare pnpm@latest --activate Then you can manually clone the repo or use degit git clone git@github.com:morewings/react-library-template.git my-lybrary # or npx degit https://github.com/morewings/react-library-template my-library # then cd ./my-library pnpm i You can also use GitHub templates functionality. Development The library code is inside folder. is used as an entry point for bundling (more on this later). ./src/lib ./src/lib/index.ts For small and , you can develop using only hot reload functionality. Run in the project, and you will be able to see your changes live in the browser: simple modules vite pnpm run dev http://localhost:5173/ You change this development environment at . Imports from folder are forbidden in the folder. ./src/env/App/App.tsx ./src/env/ ./src/lib/ For bigger and more complex packages like , you can use Storybook to have a live preview. design libraries Create a component skeleton with Storybook story files. There is a working example in . ./src/lib/CounterDemo Run Storybook in development mode: pnpm run start:docs Navigate to the component preview page, e.g., http://localhost:6006/iframe.html?args=&id=example-counter--example-counter&viewMode=story In both cases, you will be able to see and debug your changes live in browser without page reload. Styling By default, the template is equipped with architecture. It allows your component styles to have unique CSS class names, thus reducing the risk of collisions. CSS Modules import classes from './Component.module.css'; //... const Component = () => { return <div className={classes.wrapper}>{/*...*/}</div> } Style processing is done with package. Configuration is available at file. postcss ./vite.config.ts import {defineConfig} from 'vite'; import postcssPresetEnv from 'postcss-preset-env'; // https://vitejs.dev/config/ export default defineConfig({ // Here you can extend postcss configuration css: { postcss: { plugins: [ postcssPresetEnv({}), // add options if needed ], }, }, }); and examples will be added soon. Styled components Tailwind Bundle Vite is used to bundle the package. It was chosen because of the speed and wide compatibility (browser HMR and decent Rollup build). Run to get your code compiled to folder. pnpm run build dist There are two different bundles created: contains UMD for older set-ups. ./dist/index.umd.cjs contains ES Modules bundle which supports tree-shaking and other fancy features. ./dist/index.js Rolled-up type definitions are bundled to . And styles to . ./dist/index.d.ts ./dist/style.css Here is corresponding config: ./package.json { //... "type": "module", "files": ["dist", "README.md"], "main": "./dist/index.umd.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", "sideEffects": false, "exports": { ".": { "import": "./dist/index.js", "require": "./dist/index.umd.cjs" } } //... } Unit testing You can write unit tests using and . Example tests are available here: . The test configuration is done in and files. Jest React Testing Library ./src/lib/CounterDemo/Counter.spec.tsx ./jest.config.ts ./src/setupTests.ts # runs unit tests in dev mode pnpm run test --watch Automated code quality checks is important for any library. In the template, we have set checks using ESLint, Stylelint and type compliance check. Code quality ESLint ESLint checks are available using these commands: # checks code and emits errors and warning pnpm run lint:code # checks code and also tries to fix errors pnpm run fix:code You can see linter configuration at . ./.eslintrc.cjs Stylelint Stylelint checks are available using these commands: # checks style files and emits errors and warning pnpm run lint:style # checks style and also tries to fix errors pnpm run fix:style You can see linter configuration at . ./.stylelintrc Types You can check types using this command: # checks project for type errors pnpm run lint:types Commit hooks The template has ( ) and ( ) configs included. Thus, each file you commit is checked by the corresponding linter. Also, we run unit tests before push. husky ./.husky/ lint-staged ./.lintstagedrc CI/CD is responsible for pull requests checks. This flow runs every time you open PR to branch. ./.github/workflows/pull-request-jobs.yml master is responsible for the deployment of your Storybook to Gitlab pages. It runs when you add commits to branch. You have to set up the repository accordingly to make it work. The action expects Storybook pages to be built into folder. ./.github/workflows/pages.yml master ./storybook-static # builds Storybook pnpm run build:docs is responsible for package publication. Runs on branch. .github/workflows/merge-jobs.yml master Releasing your changes Don't forget to change the package name in ./package.json { "name": "your-library-name", "homepage": "your-home-page", "private": false, //... } GitHub action is responsible for changes release. To set up this action, you need to from the NPM registry. And save it as a repository secret under the name . JS-DevTools/npm-publish obtain an access token NPM_TOKEN To release, you have to run this command on branch: master # patch => 0.0.x # minor => 0.x.0 # major => x.0.0 pnpm version patch|minor|major Then push your changes to GitHub. Congrats, your contribution is done. Also published here.
