2 React Libraries with different components for the same thing. How to merge?

I have a style library, Material UI, that offers me a TextField component. But the library Redux-Form offers a Field component for the same thing. If I want to use both libraries I don’t know how to merge their properties together.

Is there any clean way to do it? I guess a high order component is the way to go, but that is a level of complexity I haven’t dealt with and I’m not sure if it’s a risk or even possible when both components come from libraries?

Curious if anyone else has done this type of component merging, any guidance is welcome.

If you aren’t using them in the same file, there is no danger or a name collision, I think. But if you need to, you can rename them on import, something like:

import { TextField as MUTextField } from 'material-design';
import { TextField as RFTextField } from 'redux-form';

or whatever…

That seems like it would work. The other possibility is just to make sure to compartmentalize your form into it’s own component so there is no chance of collision.

Yes that would work if I only needed one at a time. But I need the properties of both in all the text fields. Material UI would handle the styling and Redux-Form would handle the form state.

The later can more easily be handled manually (I’m more of a dev than designer) so if I must ditch one, I’d ditch Redux-Form

IC, yeah, that’s much harder. Let me think about that.