DEV Community

Cover image for Creating React TypeScript component library - Adding React and Storybook
Damian
Damian

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode

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:

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"]
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

... And, that's it!

Now, to run Storybook in watch mode, run:

npm run storybook
Enter fullscreen mode Exit fullscreen mode

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

Storybook default screen in watch mode

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

Top comments (0)