React Todo List Component Library

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

It also features:

Storybook to help you create and show off your components
Jest and React Testing Library enabling testing of the components

Development

Testing

npm run test

Building

npm run build

Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook

To export your Storybook as static files:

npm run storybook:export

You can then serve the files under storybook-static using S3, GitHub pages, Express etc. I've hosted this library at: https://www.harveydelaney.com/react-component-library

Component structure

/src
  /YourComponentName
    YourComponentName.tsx
    YourComponentName.stories.tsx
    YourComponentName.test.tsx
    YourComponentName.types.ts
    YourComponentName.scss
    index.ts

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

Publishing

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

Consuming

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

import React from "react";
import { TodoList } from "@izzetertas/lib-todo";

const items={[]}

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

export default App;