How To Create A React Component Library ⚛️

If you're reading this, I assume you're familiar with UI component libraries such as Material UI, Ant Design, Semantic UI, Chakra UI, and others. These libraries provide components like Buttons, Popups, Labels. Spinners, Loaders, etc.

Luckily, setting up a similar React UI component library is pretty simple, allowing you to create reusable components that can be imported and used in any React project. This article will walk you through the process of creating your very own React component library step by step.

Getting started

Creating our folder structure may be difficult, so we will take the easy way out by using the CLI tool create-react-library.

This tool configures our project with Rollup, Babel, and Jest for bundling, transpiling, and testing. It also allows our project to support TypeScript, complex peer dependencies, and CSS modules.

Installing create-react-library

This package requires Node version 10 or higher. The most recent Node version can be downloaded from the official NodeJs downloads page.

Install create-react-library by running the following command from your terminal:

npm install -g create-react-library 

Creating our project

Now that we've installed create-react-library, we can run the command below to create our project. For this tutorial, we'll name our project as test-library. You can change the name to whatever you want.

create-react-library test-library

Or with npx:

npx create-react-library test-library

You will be required to enter a:

• Package Name
• Package Description
• Author's GitHub Handle
• GitHub Repo Path
• License
• Package Manager
• Template

After the installation is done, open the newly created project in your text editor, you should have a similar folder and file structure as seen in the screenshot below. If something doesn't seem right, repeat the preceding command.

The package creates a local repository and links the packages together, allowing us to view and test our components locally. That's pretty cool.

Development

Our local development is divided into two separate parts:

• Using rollup to watch and compile our code from src/ into the dist/ folder
• Running and listening from changes in the example/ react project

Running the example react app

A basic react app that has already been linked to the library we're creating can be found in the example/ folder. Start the react app dev server by:

cd example # change directory into the example/ folder
npm start # runs a dev server for the react app

You might get an error like this:

{
  ...
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

If you do, open the package.json file in the example/ folder and change the default script object to:

"scripts": {
    "start": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider test",
    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider eject"
  }

When you navigate to localhost:3000/ in your preferred browser, you should see this.

Running the component’s code

In the base directory, run this to watch for changes and compile the code from our src/ folder in real-time

npm start # runs rollup with the watch flag

The Component's Code

A sample component ExampleComponent has been created for us in the base directory's src/ folder. This component takes a text property and renders a simple UI, as seen in the browser.

import React from 'react'
import styles from './styles.module.css'

export const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}

The styles for the component can be found in the styles.module.css file. From here, you can style your component however you want.

/* add css module styles here (optional) */

.test {
  margin: 2em;
  padding: 0.5em;
  border: 2px solid #000;
  font-size: 2em;
  text-align: center;
}

Our component(s)' compiled code can be found in the dist folder. This is the folder we’ll be deploying to npm.

Importing Our Library

In the example/src/App.js file, our library is imported together with the CSS file containing all of our stylings.

import React from 'react'

import { ExampleComponent } from 'test-library'
import 'test-library/dist/index.css'

const App = () => {
  return <ExampleComponent text="Create React Library Example 😄" />
}

export default App

Publishing our project to npm

We run the following command to generate a commonjs and es version of our code, push it to the dist/ folder, and publish it to npm:

npm publish

Thats it!

Deploying to GitHub Pages

npm run deploy

This generates a build version of our example/ React app in which we imported and displayed our components. It will be pushed to our GitHub repo, and a GitHub page will be created.

Final words

That’s it! We've created our very own react component library that can be imported and used in any react project.

Milky UI is an open source react UI component project I'm working on. I created the project using the same method. The code is available on GitHub. It is also available on npm

I hope you found this post useful. See you in the next article