Skip to content

A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook

Notifications You must be signed in to change notification settings

itayyehezkel/react-component-library

 
 

Repository files navigation

React Component Library

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

It also features:

Read my blog post about why and how I created this project skeleton ▸

Development

Testing

npm run test

Building

npm run build

Storybook

npm run storybook

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. Your components can then be imported and used.

Publishing

First make sure that you've updated the name field in package.json to reflect your NPM package name in your private or public NPM registry. Then run:

npm publish

Component Usage

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

Usage of the component (after the library installed as a dependency into another project) will be:

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 theme="primary" />
  </div>
);

export default App;

Using internal SASS variables

I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the rollup-plugin-copy NPM package and used it to copy the typography.scss and variables.scss into the build directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.

For example, let's say you installed harvey-component-library into your project. To use the exported variables/mixins, in a SASS file you would do the following:

@import '~harvey-component-library/build/typography';

.example-container {
    @include heading;

    color: $harvey-white;
}

About

A project skeleton to get your very own React Component Library up and running using Rollup, Typescript, SASS + Storybook

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 57.8%
  • TypeScript 28.8%
  • CSS 13.4%