For developers working on multiple React applications or working for an organization that uses React, there are benefits to using reusable component libraries. Component libraries are shared amongst applications and contain generic components such as buttons, accordions, and form elements. Besides the obvious benefit of code reuse, component libraries help enforce organizational style guides and allow developers to easily iterate on components used in all their applications. Component library setup is easy and can save a lot of front-end development time in the long run.jarombek-react-components |-- .storybook |-- components | |-- src | |-- stories | +-- test +-- dist
The directory structure shown above matches my reusable component library. There are three top level directories. .storybook holds configuration for storybook, a visualization tool for components. I use storybook to both view and test the functionality of my reusable components. components holds React component source code, tests, and storybook stories. Storybook stories display and serve as documentation for a component. dist is the bundled and minimized code of the reusable component library. This code is used by applications that utilize the component library.
Inside the components directory of my reusable component library is an index.js file which exports all the components in the src directory. index.js is the entry point for the library.
Inside the src directory, each component has its own directory. Components are split into multiple files: <ComponentName>.js, styles.js, and index.js.
For example, I have a reusable component called
AJSwitch. All my reusable components are prefixed with AJ so that they are easy to recognize in application code. A switch is a toggle with an on and off state, just like a typical light switch in a home.
AJSwitch has three source code files: AJSwitch.js, styles.js, and index.js. AJSwitch.js contains the
AJSwitch component function. styles.js defines the styles for the component written in JSS. index.js exports the component function to the rest of the library.
Below is an abbreviated code snippet of the component function declared in AJSwitch.js. Most of the omitted code determines which styles and classes are applied to the switch (depending on whether it's toggled on/off).
The JSS styles for the component are imported from styles.js and created with
createUseStyles() and a
useStyles() React hook1. Below is the stylesheet for
The final file, index.js, simply exports the component using ES6 modules.
Storybook is a visualization tool which allows components to be tested, viewed, and documented in isolation from the rest of an application. It can be customized and re-styled to match your company brand or personal taste.
I use Storybook for a couple of reasons. First, Storybook is helpful during a components development process for debugging and testing out styles. Second, it is useful for trying all the different props that a component can take in. Third, it serves as helpful documentation and allows users to search for components they want to use in their applications.
Storybook contains multiple stories, with each story visualizing different configurations of a single component. For example, I have a story for the
AJSwitch component defined in a stories directory in storiesAJSwitch.js. It shows two different
AJSwitch component configurations.
Storybook is easily started locally on its own server with the
start-storybook -p 6006 command (the port can be changed to your liking).
For example, the
AJSwitch component has the following type information defined in index.d.ts.
AJSwitchProps interface provides type information for the props passed to the
Finally, component typing information must be made available to applications that utilize the library. This is accomplished by adding a
types) field to package.json.
typings points to the type declaration file, which in my case is index.d.ts3.
When I release a new version of the component library, I add a tag to its GitHub repository. This tag is then referenced in an applications package.json file. For example, my SaintsXCTF web application’s package.json file has a dependency listed for my component library with a specific tag. Here is how that dependency definition looks:
Reusable component libraries reduce a developers workload when they are programming multiple UI applications. My reusable React components have allowed me to quickly create both full production frontend applications and small prototypes. You can find my component library code on GitHub.