Create a Custom React Library in TypeScript to Re-Use Across Your Projects With Storybook

Remember the dialogue between Neo and The Merovingian in The Matrix Revolutions where they were discussing the WHY - “Why do they need to find the key maker?”

We should be asking ourselves a similar question about choosing the correct approach while creating reusable components.

Why Do We Need to Create Another Custom Package? It Will Add More Complexity to Our Project

Scenario One: Imagine that the application's Front-End is a huge "Monolith," Your responsibility is to break it into smaller pieces. How do you preserve and avoid re-using the same code into every part of the broken Monolith?

OR

Scenario Two: The most common is that the entire web app needs a re-vamp. What will you do? Will you be putting your entire team through creating a more recent version of the app (which will be a very time-consuming task. We’re talking years), OR will you be breaking into smaller pieces and updating each one individually?

Both scenarios require the same solution: to move all the reusable components like buttons, input fields, headers, icons, etc. Everything that your app needs into a separate, installable package.

Let's dive into creating your first React library.

You will have Storybook configured so you can see your components before installing the entire package into another app (Product Managers will love this feature).

The first step will be (like every new project) to run the following command:

>> npx create-react-library

You can skip all the popped questions by pressing Enter. Remember that you'll be using a TypeScript template for this demo, but you can use anything you prefer.

Now that the package was created, let's navigate to it using the following command:

>> cd custom-react-library
>> yarn

You can now open the project in your favorite IDE and look at the folder structure. It will not look evident initially, but I'll help you make sense of it.

If you look at the image above at line 10, the source is also the entry point. The compiler will first look in that file, take all the components exported, and bundle them into the dist folder.

Let's continue by installing the Storybook.

What is a Storybook?

A storybook is a powerful tool to help you build the components into an isolated environment. You will install it by using the following command:

>> npx sb init

After the installation is done, you can run the Storybooks isolated environment by using:

>> npm run storybook

!Troubleshoot

If that happens, you get this error:

The error happened because you forgot to add the storybook running script that will tell what port to run. You can easily fix it by adding this command line in the scripts object in the package.json file:

"storybook": "start-storybook -p 9001",

Now you run this command again:

>> npm run storybook

and you will see something like this:

You now have an isolated environment where you can test and see your custom components!

Now what?

You will continue by adding our custom component - this means that you will delete everything inside the stories folder located in src.

For the sake of the demo, I will use the default component that create-react-library provided us - we will just be modifying it a bit, and we will add it to our Storybook so we can see it in the isolated environment.

Your story for the ExampleComponent should look like this:

You can add the props for that particular component in the bottom part of the story. You can also configure as much as you want. Just follow more details in the Storybook documentation.

AND YOU ARE DONE! You have a custom component inside your package, and you can add it to your project just like any other npm package.

Installing the Library into Your React App

Again, for the sake of this demo, I will be using a create-react-app template. Be sure to delete the example file from your library and run yarn build to recreate the index.js file inside the dist folder.

To install a package that is on your local machine, use npm i ../custom-react-library(or the path where your library is) Or you can upload it to GitHub and have it there for small projects.

With your custom library installed in your newly created React app:

you can use your component like any other component:

There you have it! You are now using a component from your custom library. Use this knowledge to bring value to your projects and keep them simple.

Happy hacking!