React Library With Typescript and Storybook in 5 minutes

The minimal React library template with visible components with Storybook

This tutorial is to experience a minimal React Typescript library with storybook in 3 steps; initialize, create, and run.

1. Initialize npm packages, Typescript, and Storybook
2. Create a Button component and a story
3. Run storybook and build

At the end, you will see the files exactly like this.

% tree -I node_modules
.
├── dist
│   ├── index.d.ts
│   └── index.js
├── package-lock.json
├── package.json
├── src
│   ├── Button.stories.tsx
│   ├── Button.tsx
│   └── index.ts
└── tsconfig.json

1. Initialize npm packages, Typescript, and Storybook

Initialize your project with react npm package

% mkdir my-react-lib && cd my-react-lib
% npm init -y
% npm i -D react react-dom typescript @types/react @types/react-dom tsup

• tsup: The fastest Typescript Bundler with zero config, powered by esbuild.

Initialize Typescript packages and config

% npx tsc --init
% vi tsconfig.json