Building a React Component Library

Do you want a cohesive framework for building beautiful and accessible applications inside of your organization? Building a component library using React can greatly lower the barrier for your non-frontend colleagues to build web and mobile apps that not only works, but look as good as everything else.

Setting up the project

Building component libraries used to be a real hassle just a couple of years back. Now though, you can simply use pre-built templates for getting started in no-time. Just as you use something like create-react-app for creating full-fledged React applications, you can use create-react-library for creating React component libraries.

To get started, if you want to use Yarn as your package manager, simply run the following command.

yarn create react-library your-project-name

If you instead want to use NPM as your package manager, you can install the package globally on your machine by running the following command.

npm install -g create-react-library

And run the following command to create the actual project.

create-react-library your-project-name

If you want to build your React library using Typescript instead of Javascript, you can append the template option to the above command.

yarn create react-library --template=typescript your-project-name
// or if using NPM
create-react-library --template=typescript your-project-name

Building

Now you should have a basic folder structure up and running. You can start the project by going inside of the example folder and running yarn start. This will start up the example project, which is basically just a React app inside of your React library that you can use to test out your package locally.

You can now create whatever folder structure you want inside of the project. As long as you export the components from src/index.tsx, you should be good to go. This will let you only import the specific components you want to use after installing it from something like npm.

// src/index.tsx
import './styles.css'
export { useModal } from './lib/modal'
export { useNotification } from './lib/notification'
export { useMessage } from './lib/message'
export { default as Autocomplete } from './components/autocomplete'
export { default as Typography } from './components/typography'
export { default as Avatar } from './components/avatar'
export { default as Badge } from './components/badge'
export { default as Button } from './components/button'
export { default as Card } from './components/card'
export { default as Checkbox } from './components/checkbox'
export { default as Switch } from './components/switch'
export { default as Container } from './components/container'
export { default as Divider } from './components/divider'
export { default as Dropdown } from './components/dropdown'
export { default as Grid } from './components/grid'
export { default as Input } from './components/input'
export { default as List } from './components/list'
export { default as Message } from './components/message'
export { default as Modal } from './components/modal'
export { default as Notification } from './components/notification'
export { default as PopConfirm } from './components/popconfirm'
export { default as Popover } from './components/popover'
export { default as Progress } from './components/progress'
export { default as Select } from './components/select'
export { default as Spinner } from './components/spinner'
export { default as Stack } from './components/stack'
export { default as Table } from './components/table'
export { default as Tag } from './components/tag'
export { default as Toast } from './components/toast'
export { default as Tooltip } from './components/tooltip'
export { default as Rating } from './components/rating'
export { default as Drawer } from './components/drawer'

Styling

When it comes to styling there are many different options to consider. You can either go with something like Styled components to get instant scoped styles for each component individually, or you can simply go with a global stylesheet that uses classes and ids. Note that if you decide to go with the latter, your users must be sure to include the stylesheet from the compiled dist folder. For example, after publishing your project, you will have a dist folder that looks something like this.

├── components
├── index.css
├── index.d.ts
├── index.js
├── index.js.map
├── index.modern.js
├── index.modern.js.map
└── lib

And when using the project, the users are going to have to import the style file, even if you import the stylesheet directly in the project.

import '{YOUR_PROJECT_NAME}/dist/index.css'

Publishing

When you have implemented a set of components and you feel ready to publish your package to NPM, I would recommend double checking your package.json file to make sure the name and description fields are set to exactly what you want. Also, make sure the version is on the version number you actually want to start on. Initially, it is going to be set to 1.0.0, but you might want to change it 0.0.1. These are the fields that you should double check, or fill out if they do not already exists.

• Version
• Name
• Description
• License
• Keywords
• Author
• Repository
• Homepage

Also, please make sure that the main, module, and files fields are set as the following. If this is not set properly your package may not work correctly.

"main": "dist/index.js",
"module": "dist/index.modern.js",
"files": [
  "dist"
],

To finally publish the project, make sure the name is unique and that there is no other NPM package with a similar name. Then run the following command to publish your package to the registry. To read more about publishing and managing packages on the NPM registry, please look towards the official documentation on npm-publish.

npm publish

If the publishing was successful you should now be able to visit the NPM website and see your newly publish package right there.

https://www.npmjs.com/package/{YOUR_PROJECT_NAME}

Maintaining

Now you have successfully published your first React component library. This is really great, although not the final step in process. Managing a React component library is so much more than just publishing it and letting it sit there. If you have entered proper keywords you will quite soon see people starting to install your package. I saw a spike of 2000 installs just in the first week of publishing. This can be quite nerve-racking and you might feel a sense of responsibility to properly maintain the package and answer every incoming issue through GitHub.

Here are a couple of tid-bits to help you with the maintaining of the project.

• Write clear and helpful commits
  This can certainly help very much for people reading the commit log on GitHub to see what is going on in the project. Just by doing this you can greatly lower the amount of incoming private messages and issues.
• Move fast and use semantic versioning
  Try to commit and publish as often as possible. If you commit smaller amounts of code you can easily go back in time to see what went wrong in case of bugs and uncertainties. Also try to use semantic versioning by using the yarn or npm command for bumping versions.
• Write clear and good documentation
  An important part of managing a React component library, or package of any sort, is documenting the functionality. I would highly recommend building an external documentation site that uses your package through npm like any other user, to document the usage for each component.

Good luck! 💎

If you have any sort of question or problem, please consider leaving your questions and thoughts in the comment section below and I will make sure to get back to you!