How can I write generic react component wrappers - reactjs

Question

I have a set of functional components that use a common set of properties, for ex:
const A = ({ x, y, z }) = {...}
const B = ({ x, y, z }) = {...}
I have partially fixed configurations for these components:
const styles {
A: {
type1: {
x: 1,
y: "something",
},
},
B: {
type1: {
x: 2,
y: "else",
},
},
};
To use these configurations, I've been writing a fixed component for each one:
// i have SFCs for A1, A2, B1, B2, C1, C2, ... etc.
const A1 = (props) = {
return <A x={styles.A.type1.x} y={styles.A.type1.y} {...props} />
}
...
// inside my business logic component
return (
<A1 z="state" />
)
This has been ok for a small amount of components and partial prop sets. However, going forward I'd like to be able to do something like this:
type A1 = styledType(styles.A.type1)(A);
return <A1 z="some_state" />
Do I need to define styledType in a type script file? Is mixing TS with JSX in a default create-react-app code base OK?
Can I refer to types (without instances) in JSX? Is what I just wrote above valid?
If there is something that already does this (react or even just plain JS / JSX / TS / whatever), I'm all ears!
So far this is what I've been playing with this:
const styledTyped = (styles) => {
return (component: C) => <C {...styles} />; // ????
};
export default styledTyped;
I know I need to return a callable that takes a component type, and returns a type wrapper that would have those properties injected.
I have no idea how to do that though... I'm currently studying material UI's withStyles, but it's got a lot going on and is a bit hard to follow as someone without experience in these languages.
EDIT:
I've gotten closer after looking at the implementation of withStyles in #material-ui/styles/withStyles/withStyles.js. I have something like this:
const withElementStyles = (styleProps) => {
return (Component) => {
return (props) => {
const newElement = React.createElement(Component, { ...props, ...styleProps });
return newElement;
};
};
};
This is almost working. It does indeed create the component with the fixed properties, as well as the ones I pass to the wrapper. However, I seem to have lost instance.type.name attribute, something I was relying on to perform type based dispatch of a few function calls.

Answer 1

I've found a solution (after learning about defaultProps), but also had to adjust other code (for the better).
I now have this:
const withStyledElement = (fixedProps) => {
return (Component) => {
const StyledElement = (props) => {
return <Component {...props} />;
};
StyledElement.defaultProps = fixedProps;
StyledElement.displayName = Component.name;
StyledElement.getConnector = Component.getConnector; // see below
return StyledElement;
};
};
I mentioned above that I was using the component name to perform type dispatch. This failed when I used a wrapped component like:
const WrappedA = withElementStyles(styles.A.1)(A);
because the component name is "StyledElement".
I decided that relying on the name was not a good approach. At the time I didn't realize you could bind functions to components after defining them.
So instead of dispatching on name, I use an expected bound method:
const getConnector = (instance, arg) => {
return instance.getConnector(instance, arg);
}
Now I don't have to add cases for each type, and I can create one-liner wrapped components that for all the flavors I need.