React Components - Extending, Customizing and reusing

Viewed 113

We are developing React Components as part of product development.

Now we want that other teams can reuse these components and develop something for different clients.

for example

We developed a UserInfo component, published on NPM repository and other teams can use it for different clients. We are done with all basict things like NPM publish, then developrs can point newly component in package.json and can use it effectively.

But the problem I'm facing in component architecture, how a component can be designed, so that these can easily be customized by other developers.

Like a developer can have requirement for different view, some extra methods, or override existing methods.

My Approach - I feel that more improvements can be done

Approach#1 We wrote Web pack plugin to replace existing file by newly created file during build time.
Problems - Its a complete replace, so we cannot reuse or extend the existing file

Approach#2 - Tried to use ES6 Extend The problem here is We are extending JS Call not "React.Component" so some unwanted behavior of methods and functions are observed.

There is also problem on customizing internal components, you can visualize internal component from image. i.e How to extend/customize Image Component, Address Component etc.

I am working hard to find the optimal solutions since last 2 months, expecting some help from community.

enter image description here

0 Answers
Related