Template for developing react components. A SimpleButton component with tailwindcss3 is implemented as an example.
React + Typescript + Rollup + Jest + Storybook + Tailwind3 + PostCSS8 + Webpack5
# clone the template
git clone [email protected]: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
yarn devImplement custom components inside src/components folder.
# visit localhost:6006, should be able to see the styled component
yarn storybookyarn test# 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 buildGit push to remote will trigger auto release
-
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.
- 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