DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for The Making of A React Component Library

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...
Collapse
 
brense profile image
Rense Bakker

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.

Collapse
 
aviavinav profile image
Avi Avinav

Thanks for adding that!

Collapse
 
dondaniel profile image
Don1011

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.

Collapse
 
aviavinav profile image
Avi Avinav • Edited on

Thanks for pointing that out!

Collapse
 
posandu profile image
Posandu πŸ’«βœ¨

Hey, there's a typo in your article title. It should be 'Library' but you've written 'Librabry'

Collapse
 
aviavinav profile image
Avi Avinav

Thanks for pointing that out, I was so focused on looking at the body of the post that I forgot to check the typo in the title.

Collapse
 
lozio1992 profile image
lozio

thanks, it helps me a lot. Can I translate it into Chinese and share it to more people on juejin.im ?

Collapse
 
aviavinav profile image
Avi Avinav

Sure, go ahead, just mention the original article too. Let me know once you have done it. Thanks!

Collapse
 
lozio1992 profile image
lozio
Thread Thread
 
aviavinav profile image
Avi Avinav

Awesome! Thanks!

Collapse
 
femi_dev profile image
Femi Akinyemi

Why do you strongly recommend typescript over JavaScript ?

Collapse
 
aviavinav profile image
Avi Avinav

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

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

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 ?).

Collapse
 
jasonrundell profile image
Jason Rundell

An alternative to TypeScript is PropTypes npmjs.com/package/prop-types

Thread Thread
 
aviavinav profile image
Avi Avinav

I have heard of it but haven't tried it

Collapse
 
lucianodiisouza profile image
Luciano dii Souza

This guide looks pretty good! Thanks for sharing your knowledge!!

Collapse
 
aviavinav profile image
Avi Avinav

Glad you liked it!

Collapse
 
alpavlove_9 profile image
Alexey Pavlov

Nice article. I wrote a similar article recently

Btw, nx is also an option for managing monorepos

Collapse
 
aviavinav profile image
Avi Avinav

Haven't tried nx before, but will try it out

Collapse
 
bosz profile image
Fongoh Martin T.

This is good.

Collapse
 
aviavinav profile image
Avi Avinav

Thanks!

Collapse
 
shreelimbkar profile image
Shrivardhan Limbkar

check out this - TSDX - Zero-config CLI for TypeScript package development tsdx.io/

Collapse
 
aviavinav profile image
Avi Avinav

I did know about it and have tried it in the past but from what I know it's no longer being maintained, so I wouldn't recommend using it.

Collapse
 
shreelimbkar profile image
Shrivardhan Limbkar

oh..okay. make sense.

Collapse
 
devangtomar profile image
Devang Tomar

That was a nice read! Liked, bookmarked and followed, keep the good work! πŸ™Œ

Collapse
 
aviavinav profile image
Avi Avinav

Thanks!

Collapse
 
aviavinav profile image
Avi Avinav

I hope you like it. Please feel free to advise me on how I can improve.

Collapse
 
weptwithoutwit profile image
⚫️ aha hah • Edited on

web2worksonmymachine