React local package

Build

npm run build:package

Build Package

npm run build:package

It will generate a package like => [package-name]-[package-version].tgz e.g. my-react-components-0.1.0.tgz

Don't forget to add the component to your index.ts exports if you want the library to export the component!

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.

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/HarveyD/react-component-library.git#branch-name

OR

npm i --save github:harveyd/react-component-library#branch-name

Usage

Let's say you created a public NPM package called harvey-component-library with the TestComponent component created in this repository.

Stylesheet

First, you'll need to import the index.css CSS file distributed by the package. This should be done at the root of your project (in index.js or App.tsx of your React app) and will look like:

import 'harvey-component-library/build/index.css';

...

Components

Usage of components (after the library installed as a dependency into another project) will look like:

import React from "react";
import { TestComponent } from "harvey-component-library";

const App = () => (
  <div className="app-container">
    <h1>Hello I'm consuming the component library</h1>
    <TestComponent heading={'Some heading'} content={<div>Some content</div>} />
  </div>
);

export default App;

Check out this Code Sandbox for a live example.

Using Component Library CSS Variables

Above we imported index.css into the root of our project. index.css contains a number of CSS variables that can be used across the project that consumes our component library.

In your CSS, you can use the variables defined in variables.css like:

.example-container {
    color: var(--harvey-white);
    background-color: var(--harvey-black);
}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more information about CSS Variables.