I have a component that is used across different clients in the application. 80-90% of the functionality is common across all clients but 10-15% is customized for each client (there could be UI changes or some functional changes). I don’t want to create a component for every client, rather I am looking to create a base component that has all common functionality and only create the 10-15% of functionality that is client specific. What is the best approach for this in ReachJS and Material UI so it’s easy to maintain over time?
There are different ways to handle this. If the component is not going to need to change that often, one way would be to create a repo for that component (and any others that are common) and import them into your project. Submodules are another option.
It also depends on what you mean. Do you mean that you have this common component that goes into a React app, or are you saying that you basically have one component and it needs to be slightly different for each client? So, you may want just make it very configurable by passed in props, a config file, or whatever.
Thanks Kevin! Here is a bit more details on the question
We sell each module a la carte - clients may or may not include modules in their build.
Clients want to be able to customize:
-
Branding (fonts, colors, etc.)
-
Home page details
-
Client-specific inputs into calculations
-
Text copy
You can create a separate project for all reusable components and publish it in npm. Then import this package in each client’s project.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.