Creating React TypeScript component library - Adding React and Storybook
Published: 2021-07-23 22:31:48

## 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.

```bash
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:

<figure>
<blockquote cite="https://nodejs.org/en/blog/npm/peer-dependencies">
What we need is a way of expressing these "dependencies" between plugins and their host package.
</blockquote>
<figcaption>—Domenic Denicola, <cite>Peer Dependencies</cite>
</figure>

<br/>So, you can add this above you devDependencies:
```json
"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:

{% link https://dev.to/kraftdorian/creating-react-typescript-component-library-basic-rollup-js-setup-3k93 %}

Next, as we have properly installed React, we can update our rollup.config.js, and change the index file extension:
```diff
- input: ["src/index.ts"]
+ input: ["src/index.tsx"]
```

Finally, we can update our component to use JSX:
```tsx
// @/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](https://github.com/kraftdorian/react-ts-rollup-starter-lib/tree/1.2.0).

## 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](https://storybook.js.org).
It's a great tool for UI development, so it's perfect for our case.

To install it, just run:
```bash
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!

```tsx
// @/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:
```bash
npm run storybook
```

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

![Storybook default screen in watch mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l73na3quj1a8n0vpfjqg.png)

You can also view these changes in [my GitHub repo](https://github.com/kraftdorian/react-ts-rollup-starter-lib/tree/1.3.0).

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

Photo by <a href="https://unsplash.com/@lazycreekimages?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Michael Dziedzic</a> on <a href="https://unsplash.com/@lazycreekimages?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>