A React component library boilerplate which:
- includes React,
- bundles CommonJS, UMD and ESModule JavaScript files,
- provides a Styleguidist dev environment & component documentation,
- provides unit test, best practice configuration
- supports styled components (CSS) via @emotion.
Clone or fork the repository:
git clone git@github.com:adamjarling/starter-react-component-npm.git
Install dependencies (use Yarn or NPM...your choice but examples below use yarn
)
# Yarn
yarn install
// or...
# NPM
npm install
Use Styleguidist as the development environment.
yarn styleguide
which will spin up a local Styleguidist webpack dev server that handles live-reloading as you write tests, build out components, and write documentation.
Unit tests are set up to run using Jest and @testing-library.
yarn test
// or
yarn test:watch
To build the package, we use Rollup:
yarn build
To directly build the latest version of the style guide:
yarn styleguide:build
-
Rename the project folder "starter-react-component-npm" to your own...ie: "my-new-component"
-
Update the
/package.json
file to customize for your project. Especiallynamme, description, keywords, author
, etc.
When ready to bundle your component, run:
yarn build
This will build a fresh copies of the package in the /dist
folder. It will also build a fresh copy of the style guide in the /styleguide
directory.
Here's how to publishing your package to NPM: https://docs.npmjs.com/cli/publish
To publish your package:
npm publish
- React - JavaScript component library
- Rollup - Rollup JavaScript bundler
- Jest - Testing framework
- Styleguidist - Local dev environment & documentation
This project is licensed under the MIT License - see the LICENSE.md file for details