How to Share React UI Components between Projects and Apps

A simple guide to help you easily share and reuse React components across apps, to build faster and better.

React components are designed to be the reusable Lego bricks of your UI.

Learn more :

How We Build Micro Frontends and How We Build a Design System.

However, sharing your components in multiple apps and projects isn’t always simple. Sharing components often means creating new repos, making changes in multiple places, and struggling to keep your UI in sync.

Bit helps you turn components into building blocks you can share, discover and sync across your projects and applications. Bit’s platform:

Bit · UI component library for frontend teams

Share reusable code components as a team · Bit

All your components will be organized and made available for your team, which can discover, install and even develop components in any project.

React spinner components with Bit

Each component becomes discoverable with a live playground, preview examples, auto-extracted docs, test results and more.

A React spinner component in Bit’s playground

Every component can be installed with NPM/Yarn, or imported and developed from multiple projects to make and sync changes.

Here is how it works in 3 simple steps.

Step 1- Sharing your components

React components for an awesome movie-app

Here is an example React app on GitHub. In this 5 minutes tutorial, we’ll turn it into a component collection like this one, use these components in other projects and sync changes to our components from any project using them.

As you can see, this app contains 8 reusable React components in the src/components directory, and 1 global styles component in a different path.

For this quick demo you can clone this repo, or use your own project. If you’re cloning the app, please make sure to delete the bit.json and .bitmap files.

First, let’s install Bit and login to connet to your bit.dev account, then Initialize it for your project.

# Install Bit
$ npm install bit-bin -g
# Authenticate to bit.dev
$ bit login
# Initialize it for your project
$ cd movie-app
$ bit init

Adding Build and Test Environments

Before moving on, let’s add build and test environments to the workspace Bit created for the project, to let Bit build and test your components in isolation.

When working with React components, adding a compiler will also enable Bit to render your components on Bit’s web-UI (live example).

Let’s import these pre-made build and test environments for this React components (you can always use existing ones or create your own envs).

# Import an environment to build and render the components
$ bit import bit.envs/compilers/react --compiler

# Import an environment to test the components in isolation
$ bit import bit.envs/testers/karma-mocha --tester

Now let’s get to business and tell Bit which components you would like to share from your project, so it will seamlessly start tracking them everywhere.

In this case, we’ll use a glob pattern to track all the react components in the src/components directory and a specific path to track the css component.

# Start tracking your React components + test files
$ bit add src/components/* -t 'src/components/{PARENT}/*.spec.js'
# Start tracking the global styles component
$ bit add src/global.css --id style/global

Note that the ” -t ‘src/components/{PARENT}/*.spec.js’ “ syntax isn’t mandatory, but it tells Bit which test files to add for your components.

Now let’s tell Bit to isolate the components from your project by locking a version and automatically defining their file / package dependencies.

# Tag the 9 components Bit is tracking
$ bit tag --all 1.0.0

Next, let’s share our components to a remote collection called a collection.

A collection works like a “playlist” in which your components are organized, and functions as a remote source of truth to track changes across your projects.

Let’s quickly create a free collection on Bit’s component hub (you can also set up a local server) and share our components to this new collection.

# Export the components to your collection
$ bit export <owner_name>.<collection_name>

That’s it!

You now have a collection of all your favorite React components to share.

You can browse through your collection, view the rendered components, see the test results, view auto-parsed docs and use them in other projects.

Here the Hero component.

React hero component

Step 2- Using components in other projects

Now that our collection is ready, it’s time to put our components to use in other projects. First thing’s first, let’s see how to install them as packages.

To install the component in other projects all you have to do is configure bit.dev as a scoped registry for your NPM client using a single command.

Then, you can simply install any component as a package using the component’s install command (also found on the component’s page).

Installing the React Hero component using NPM

And that’s it. We didn’t have to split our repos, boilerplate packages or work hard- and all our components are now available with NPM and Yarn.

Let’s see how we can also make changes to the components from any project using them, and sync the changes across our entire codebase.

Step 3- Making changes from any end

Sharing a React component between two apps using Bit

One of Bit’s most useful features is the ability to make changes to your components from any other project, and sync them across your codebase.

Enabling 2–way code changes creates a distributed development workflow between your projects and team members that speeds development.

To make changes to a components, simply import it into a different project. Let’s import the HERO components into a new project (you can use create-react-app to quickly set up a new project).

# Import a component into a project
bit import <owner_name>.<collection_name>/components/hero

Once imported, you can make changes to the code as needed. Bit will continue to track the component and identify that it was changed.

Let’s run bit status to see that our component was modified.

# Check the status of your components
$ bit status
modified components
  > components/hero

Now let’s quickly tag the component again and export it back out to your collection (or to a new collection- it’s your choice).

bit tag name_space/component_name
bit export <owner_name>.<collection_name>

Note that when exporting you can even eject the component from the project back to being a package dependency in the project’s package.json file.

bit export name_space/component_name <owner_name>.<colllection_name> --eject

If you share back to the original collection, Bit will bump a version for the component- so you can now import the new version into the original collection to update the code (you can see if the tests still pass before updating).

Using Bit, you can also merge changes to components in different projects. You can learn more about it here.

Upcoming features include an event-driven update strategy that will help you automatically control updates based on different parameters like test results.

Collaborating as a team

Before Bit, our own team had different components scattered in different apps, each with its own visual and functional changes to suit the project.

Using Bit, we were able to create collections that work like “Lego boxes” that our team shares in order to build different projects and applications.

Every team member can easily find the components they need, use it in their projects and easily make the changes they need for their applications.

You are welcome to try it out and turn your own components (React, Vue, or any other JS functionality) into your team’s shared building blocks.

Bit is open source so feel free to suggest feedback or contribute to the project!

Component Discovery and Collaboration · Bit

Learn More:

How We Build Micro Frontends and How We Build a Design System.

How We Build Micro Frontends

How We Build a Design System

How To Write Better Code In React

11 React UI Component Libraries You Should Know In 2018