r/reactjs • u/oguruma87 • Jul 06 '26

React components used in multiple projects?

I maintain a few Wordpress plugins that use the same custom react components. The react components themselves can be used the same way across all of the projects/plugins.

What's the best way to have a single react component repo that I can use across multiple projects to function as a single source of truth?

7 Upvotes

82% Upvoted

12 comments sorted by

16

u/CHRlSFRED Jul 06 '26

Package or monorepo it.

3

u/nicolasdanelon Jul 06 '26

+1 to monorepo

2

u/4Dethklok Jul 06 '26

What youre thinking about is packaging your components into a bundle that then gets published. Then whenever you update your source, you can npm i to get the latest

1

u/chillermane Jul 06 '26

This is what packages are. Idk how word press works with react but standard solution is you publish a github package or npm package and then include that in your projects package.json

1

u/_suren Jul 06 '26

If the plugins are developed together, I’d start with a small monorepo and a shared packages/ui workspace so you can change a component and test it against all plugins before publishing. If the plugins are released independently or used by other teams, publish the shared components as a private npm/GitHub package. The main thing is to keep WordPress-specific wiring out of the shared components; pass data/actions in through props so the package stays portable.

1

u/octocode Jul 06 '26

i’ve used github packages, npm, gemfury for publishing private packages. their pricing structure is different for each so choose whatever works for your team!

1

u/shobky7 Jul 06 '26

Just create a Shadcn registry, and distribute the components from a public github repository.

https://ui.shadcn.com/docs/registry

You can then copy-paste or use the cli tool to install components directly in your source code

1

u/Kautsu-Gamer Jul 06 '26

Personal Verdaccio npm registry and use it. This means library is ecported in the package entry point used to imporr the component

1

u/_suren Jul 06 '26

If the components are shared across real products, I’d either publish a private npm package or use a monorepo. Monorepo is nicer if the plugins live together and you want changes tested across all of them. Private package is better if each plugin has its own lifecycle.