CODEWITHSUNDEEP
reactjstypescriptshared-librariesshare
user1162910
user1162910

Reputation: 133

How to share react component across multiple projects?

I have few react components in a project that I would like to use in another few react projects. What would be the best way to share the components across the projects ? I know that we could use something like bitly to do it but is there any other open source way like git submodules to share the components across multiple projects.

Upvotes: 11

Views: 22666

Answers (4)

Dimitri Lavrenük
Dimitri Lavrenük

Reputation: 4879

There are multiple ways depending on your setup. As @Alex Wayne suggested the easiest way is to use a monorepo. If you setup does not allow it, you can publish a package to npm. If you can't or don't want to package a public package, you can publish private packages (with a payed account) or use a private package registry, such as GitHub packages. There are also self managed solutions for package registries if you want to safe some bucks in exchange for some work.

Edit 2023: Github packages seems to have a free plan for private repositories now, thank you @Taig for pointing this out

Upvotes: 3

Deepak Negi
Deepak Negi

Reputation: 331

If you are using the webpack version 5 or above, you can use the concept of module federation. Or you could publish npm package for those shared components (But here you will have to manually upgrade the package any time you change the components).

Below links could help, have a look: https://webpack.js.org/concepts/module-federation/ https://www.youtube.com/watch?v=d1SS7KAsbdY&ab_channel=KevinGhadyani-JavaScript

Upvotes: 1

zip27
zip27

Reputation: 91

One way that worked for me is to define a component in a React app (using create-react-app), bring that whole React app to Github, and npm install it as a dependency. I highly encourage you to check out this resource which explains in detail how to prepare a React component for this process. Follow the steps in the linked tutorial up to #3, then bring everything (including the /dist folder) to Github. Then, do npm install org_name/repo_nameand install it as a dependency in your second React app. Then, to import a specific component, you can do something like import { Button } from 'repo_name/dist/index' or reference whatever file you used to export your components.

In case the link doesn't work, here are the steps in the article:

  1. Create a folder called lib that stores all the components you want to bring to the other react app. Also define a file called index.js in this folder that exports these components.
  2. Create a repo for the components on Github
  3. Install Babel and build the dist folder.(npm install --save-dev @babel/core @babel/cli @babel/preset-env and npm install -save @babel/polyfill)
  4. Add the following config file to the top-level folder of your project:
{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}
  1. In package.json, replace the build script with the following: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files";
  2. Run the command npm run build

Upvotes: 6

JoniS
JoniS

Reputation: 87

So going monorepo is an option, and so is creating and managing (and configs) many npm packages, but another option is to use an open-source tool like bit that decouples component development from a specific repo and handles stuff like packaging, configs, and dependencies for you.

Here are a couple of tutorials on how to share React components across multiple projects and repos in practically any architecture:

Video tutorial
Walkthrough with code

(I'm on the team building Bit, here are some of my own examples).

Upvotes: 0

Related Questions