Creating React TypeScript component library - Adding React and Storybook

The Core of the library

This article deals with the installation of React and explains npm peer dependencies.
In the end, we will be able to see our component in a browser.

Superheroes (React and friends)

This part is very easy. Just install React, React DOM, and types.

npm i --save-dev react react-dom @types/react

Now, we need to add react and react-dom to package.json peerDependencies. Why?
I recommend reading this great article that can be found on the npm blog: https://nodejs.org/en/blog/npm/peer-dependencies

It's just all about the fact, that we create some independent package:

What we need is a way of expressing these "dependencies" between plugins and their host package.

—Domenic Denicola, Peer Dependencies

So, you can add this above you devDependencies:

"peerDependencies": {
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0"
},

Why 16.8.0? React Hooks were added in that version! :-)

Do you remember rollup-plugin-peer-deps-external dependency we added before? It automatically excludes peer dependencies that we just set from the bundle.

In case you missed that part or want to recall it, you can find it in my previous article:

Creating React TypeScript component library - basic rollup.js setup

Damian ・ Jul 20 '21

#typescript #react #library #rollupjs

Next, as we have properly installed React, we can update our rollup.config.js, and change the index file extension:

- input: ["src/index.ts"]
+ input: ["src/index.tsx"]

Finally, we can update our component to use JSX:

// @/src/index.tsx
import React from "react";

const Component: React.FC<{}> = ({ children }) => {
  return <div>{children}</div>
};

export default Component;

You can also view these changes in my GitHub repo.

Face to Face (of our component)

Now, how we are able to see our component in action?
Browsing many solutions available, a nice choice is to use the Storybook.
It's a great tool for UI development, so it's perfect for our case.

To install it, just run:

npx sb init

If it asks for permission to install sb package then it's fine, you can just confirm that.
This will create src/stories directory with some examples, you can delete them.
Also, you will find some new scripts in package.json.

Let's go ahead and create a story for our component!

// @/src/index.stories.tsx
import React, {PropsWithChildren} from 'react';
import { Meta, Story } from '@storybook/react';
import Component from "./index";

// This is meta information about our component
const meta: Meta<PropsWithChildren<{}>> = {
  title: 'My Component',  // What title to display in component story page
  component: Component,  // This one is obvious :-)
  argTypes: {  // Here we can specify configuration for our component's props
    children: {
      description: 'Content or elements to be rendered inside the Component',
      control: {
        type: 'text',
      },
    },
  },
};

// Create one template for our component's story to use in some custom variants
const Template: Story<PropsWithChildren<{}>> = (args) => <Component {...args} />;

// Basic variant of our component
const Basic = Template.bind({});
Basic.args = {
  children: 'Component',
};

export default meta;
export { Basic };

... And, that's it!

Now, to run Storybook in watch mode, run:

npm run storybook

This should open your browser at localhost with a 6006 default port.

You can also view these changes in my GitHub repo.

In any case, that's it for this article.
Thanks for reading!

Photo by Michael Dziedzic on Unsplash