Remember the dialogue between Neo and The Merovingian in The Matrix Revolutions where they were discussing the WHY - “ do they need to find the key maker?” Why 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 : 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? Scenario One OR : 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? Scenario Two 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 . Remember that you'll be using a TypeScript template for this demo, but you can use anything you prefer. Enter 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 is also the The compiler will first look in that file, take all the components exported, and bundle them into the folder. source entry point. dist 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 folder located in . stories 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 to recreate the index.js file inside the folder. yarn build dist To install a package that is on your local machine, use (or the path where your library is) Or you can upload it to GitHub and have it there for small projects. npm i ../custom-react-library 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!

Maker

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Best JavaScript Chat Libraries

An Introduction to Bunzz SDK: How to Have a Speedy DApp Development Process

How Reassure Makes Continuous App Performance Monitoring Simple

The Easiest Way to Create Your First NPM Package

The Philosopher's Public Library

5 Best JavaScript Chat Libraries

An Introduction to Bunzz SDK: How to Have a Speedy DApp Development Process

How Reassure Makes Continuous App Performance Monitoring Simple

The Easiest Way to Create Your First NPM Package

The Philosopher's Public Library

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps