Build and Share React UI Components between Projects using Material UI and Storybook Part-2

In this tutorial, you are going to learn how to use the components that you’ve created in the storybook in various ReactJS projects.

Please Note: This is the second part of a 2 Part Course. For more context and an overview of this tutorial, please refer back to Part 1.

Component as a package

Inorder for our storybook component to be used in various ReactJS projects , we need to export them as packages.

You could choose to publish them as a public or private package depending the nature of your project.

The components needs to be transpiled before they are exported as an npm package.

Transpiling your StoryBook Component

Using Babel

Babel is used to convert /transpile JSX syntax , Typescript into regular JavaScript. Let’s install Babel Cli in the storybook project.

npm i babel-cli -D

Now, let’s modify the pakage.json add a distribute script which we will use to cause Babel to transpile our component source files into a target folder named dist

"distribute": "rm -rf dist/factory-utils && mkdir -p dist/factory-utils && babel src/factory -d dist/factory-utils — copy-files"

Now, run npm run distribute

This will create a dist directory in the project. Now, upload this directory to npm as a package. Refer https://docs.npmjs.com/creating-and-publishing-private-packages for creating a private package.

Spin up a React App

Let’s start by spinning up a React App using create react app. If you need a refresher, please refer to https://reactjs.org/docs/create-a-new-react-app.html

Install your package in this project as a dependancy using npm i <my-package>.

Your package.json show have the following line

"@mypackage/dist": "1.1.1",

Now, import the components you’ve created in your storybook into your react project.

This method is beneficial if your organization have multiple react projects and plan on re-using the components as libraries.

This way, your developers can focus on building reusable components which can be shared across the organization/ unit and do not to spend time in reinventing the wheels.

Thanks for all the claps

Conclusion

In this article, you’ve learned how to build, share and reuse React UI Components between projects using Material UI and Storybook.

I hope you enjoyed this article! Please let me know if you have any feedback on how I can improve. Want to get notified when I contribute new articles? Then please don’t forget to follow me :). Thanks and Cheers!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture
• More content at PlainEnglish.io