Writing a shared React component library with storybook

At GumGum, my team builds and works on many React JS web applications. As the number of apps grew, we found ourselves writing the same code and components for each app. This is not ideal because we had to spend time writing similar code, and it was not centralized, so each variation might have slight differences.

A few things came together at once for our team:

It all made sense — let’s create a shared component library!

The first thing we need here is the library. In a new project, we made a components folder and started with our most basic components.

Here is a stripped down component example. Our badge takes in text to display in the badge and context, which is the color applied to the badge via our design system. We also apply some standard props to every component: className, style, and …otherProps, which allows you to pass in any other classes, styles, or props that you want — making your component very flexible.

yarn i --save-dev @storybook/react

And finally, we needed to add a link to our custom css file for our design system. This goes in .storybook/preview-head.html

For our purposes, since we’re using this library internally, we only needed to be concerned about exporting ES6 components.

First, we have a single index.js file that exports each component.

You’ll need a few packages and settings depending on your set up on the projects that will import it.

Our .babelrc:

To handle the actual build tasks, we added a few scripts in our package.json:

Postinstall lets us automatically build our library as es6 modules when the library is added to a project. This way we don’t have to build the files and keep them as part of our library. To deal with dependencies on our other projects, we use postinstall-build --only-as-dependency to grab any dependencies we need to build our library and remove them after they are built.

Finally, we need to import our library into our other React apps to use the components.

We aren’t publishing this on NPM, so when adding the library to a project, we can use this command:

(We do releases and use versioning for this project. Highly recommended!)

And then in a component file, you can import components from your library:

import { Badge } from 'YOUR-LIBRARY';

Related posts:

the water demands nothing of me just softly invites my body to participate in a fluidity beyond call and response uniting gentleness and strength without the pressure of words and another pair of…

When you see the word ‘trust’ in relation to blockchain, it’s usually as part of the word ‘trustless’, where you don’t need to trust a intermediary or third party as a consequence of leveraging a…

Flat UI took over skeuomorphism in 2013 and has been dominating the trend for the past 5 years. At first the flat user interfaces we got were quite simple— single-coloured elements that stand out…