CODEWITHSUNDEEP
reactjsreduxlerna
Sheffield
Sheffield

Reputation: 413

How to organize two React projects with shared components?

I have two React projects. They share most of the components (with minor differences in certain props). Also, the Redux they both use will also share a similar data model (95% are the same) and differ in some reducer actions (one have and the other one doesn't).

Their front-end pages/containers consist of components that behave similarly. I'd like to make the common components shared between the two projects and I could pass in different props to let them render differently.

Ideally, the two projects should generate two different artifacts, but it seems better to put them in a single repository. I'm not sure how I should organize my projects.

Lerna should work but would it be too complex for my scenario? Actually, in most cases, the component implementations and handling logic behind are similar.

Upvotes: 2

Views: 1204

Answers (1)

Code-Apprentice
Code-Apprentice

Reputation: 83587

One solution is to maintain 3 different projects: one for each of the existing projects and a separate "library" with the shared components. You can do either 3 separate git repositories or one repo with each project in its own subdirectory. With 3 separate git repos, you can publish the library project so that you can install it with npm. This can be either to the public NPM registry, if you wish to share your library, or to a private registry.

Upvotes: 1

Related Questions