React Component Library

This project skeleton was created to help people get started with creating their own React component library using:

• [Webpack]
• Sass
• [Babel]

It also features:

• Jest and React Testing Library enabling testing of the components

Development

Testing

npm run test

Building

npm run build

Installing Component Library Locally

Let's say you have another project (test-app) on your machine that you want to try installing the component library into without having to first publish the component library. In the test-app directory, you can run:

npm i --save ../react-component-library

which will install the local component library as a dependency in test-app. It'll then appear as a dependency in package.json like:

  ...
  "dependencies": {
    ...
    "react-component-library": "file:../react-component-library",
    ...
  },
  ...

Your components can then be imported and used in that project.

Publishing

Hosting via NPM

First, make sure you have an NPM account and are logged into NPM using the npm login command.

Then update the name field in package.json to reflect your NPM package name in your private or public NPM registry. Then run:

npm publish

The "prepublishOnly": "npm run build" script in package.json will execute before publish occurs, ensuring the build/ directory and the compiled component library exist.

Hosting via GitHub

I recommend you host the component library using NPM. However, if you don't want to use NPM, you can use GitHub to host it instead.

You'll need to remove build/ from .gitignore, build the component library (npm run build), add, commit and push the contents of build. [See this branch for an example.]

You can then install your library into other projects by running:

npm i --save git+https://github.com/vhren/freact-js.git#branch-name

OR

npm i --save https://github.com/vhren/freact-js#branch-name