React Component Library Template
Template for developing react components. A SimpleButton component with tailwindcss3 is implemented as an example.
Deps
React + Typescript + Rollup + Jest + Storybook + Tailwind3 + PostCSS8 + Webpack5
Setup
# clone the template
git clone git@github.com:ZitySpace/react-component-template.git ${YOUR_REACT_LIB_FOLDER}
# update `name` in `package.json`.
cd ${YOUR_REACT_LIB_FOLDER}
# install dependencies
yarn install
# setup husky precommit
yarn husky install && yarn husky add .husky/commit-msg 'yarn commitlint --edit $1' && yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty'
# remove storybook examples (optional)
rm -rf src/stories
Development
yarn devImplement custom components inside src/components folder.
Preview
# visit localhost:6006, should be able to see the styled component
yarn storybookTest
yarn testPackaging
# package the lib inside dist folder, insert tailwind css (only for tags
# that are used in the library) in the head of packed library, you can
# find it in dist/*/index.js
yarn buildRelease
Git push to remote will trigger auto release
Publish
-
Create
$REPO/.npmrcfile with content:registry=https://registry.npmjs.org/ @ZitySpace:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=$GITHUB_PERSONAL_AUTH_TOKEN@ZitySpacescope refers to the prefix of package name inpackage.json. -
Publish:
npm publishoryarn publishwill publish to github repo.
Reference
How to package
- How to Create and Publish a React Component Library
- Creating a React Component Library using Rollup, Typescript, Sass and Storybook
- Build a component library with React and TypeScript
How to integrate tailwind
- TailwindCSS with ReactJS
- Building Component libraries with TSDX and Tailwind
- Bundle Stylesheets and Add LiveReload With Rollup
- Storybook + Tailwind 2 + PostCSS 8