24
Creating React TypeScript component library - Adding React and Storybook
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.
In the end, we will be able to see our component in a browser.
This part is very easy. Just install React, React DOM, and types.
npm i --save-dev react react-dom @types/reactNow, 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
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.
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:
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.
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.
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 initIf 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.
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 storybookThis 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!
Thanks for reading!
Photo by Michael Dziedzic on Unsplash