DEV Community

The Making of A React Component Library

Avi Avinav on September 11, 2022

A component library is one of the coolest things a web developer can make, but if you don't know how to make one, let me guide you a bit. Before w...

Read full post

Rense Bakker • Sep 12 '22

Do be careful when creating a component library that is going to be used within a company. Some general tips: Make sure you follow React design patterns like composition and read up on the open/closed principle, otherwise you're going to create a lot of frustration for your fellow dev. If you're extending an existing UI component library, make sure you follow the same pattern and dont create black boxes for the components that you're extending.

Avi Avinav • Sep 12 '22

Thanks for adding that!

Don Daniel • Sep 25 '22

Hi, at the time of posting this comment, npx storybook --init doesn't work and based on the documentation, it's because a project creation framework wasn't used. So simply using npx sb init worked fine.

Avi Avinav • Sep 25 '22 • Edited

Thanks for pointing that out!

Remy • May 26 '23

Hey, thanks for putting this article together, I'm just looking into this now. I'm using CSS modules. It would've been good to have seen use of tsup with some css support as that appears to be one of its limiting factors and the documentation is a little thin around that area. Have you tried it in this context?

Avi Avinav • May 26 '23

I haven't tried using CSS modules with tsup so I don't have much knowledge on that, however you can try using rollup, it has a wide range of plugins and more configurable, you will just have to spend a little more time on its config than tsup. You can look at one of my old projects: github.com/AviAvinav/aloria-ui, I have used CSS modules with rollup here, you should look into the docs if anything's changed, since the project is old.

Femi Akinyemi • Sep 12 '22

Why do you strongly recommend typescript over JavaScript ?

Avi Avinav • Sep 12 '22

Specifically for a component library, I would recommend using typescript because it provides sort of a built-in documentation.

Let's say the Button component that we used in the article also had a size prop which is only supposed to accept values: lg, md, or sm (standing for large, medium and small respectively), then I can just define my component's props like this:

export interface ButtonProps {
  children: React.ReactNode;
  onClick: () => void;

  /** size of the button, tells what size of button do you want */
  size: 'lg' | 'md' | 'sm';
}

This way when the user actually uses our component inside their project if they put any other value for the size prop besides lg, md, or sm, they will recieve a warning. If you would notice, I also added a comment above the size prop, this helps as sort of a documentation. You can see this happening in the image below:

As you can see, my editor shows me there's a problem because large is not an acceptable value for the size prop. Also you can see when I hover over the size prop it shows me the acceptable values and the comment we wrote before.

This also provides better intellisense as you can see in the image below:

By default all the props you give to your components (in typescript) will be complusory, to make them optional you can just add a ?, like this:

export interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;    // look here

  /** size of the button, tells what size of button do you want */
  size: 'lg' | 'md' | 'sm';
}

This makes the onClick prop optional so now it won't cause an error if onClick is not specified during usage, but if you don't specify the size prop or add children during usage it will show a warning as they are compulsory (do not have a ?).