render with different child components from props

Question

I am currently working in a scenario, where I need to be able to import a component from library, but tell it to choose different components for some of its child components to render with. In this case, it needs to choose different button components, for example. Now I already got this working, as in, it does what it needs to do, but I am wondering if there is maybe a more fitting/appropriate way of doing it.

export const container = ({component, children}) => {
   const ButtonComponent = component?.button ?? Button;

   return (
       <div>
           <ButtonComponent size="large">Do something</ButtonComponent>
      </div>
   )
}

In this case, Buttons are defined in this same library, but on the side of the application where the library is consumed, the buttons are modified, variants are added, some properties are added that are not part of the original component of the library. And I am telling the component to use a different component like this:

<container component={FancyButton} />

As I said this works, but it feels like there might maybe be a more elegant solution to this. This is relevant, because the library uses an atomic design methodology approach, where some of the more complex components use less complex components, but they are being modified for a specific usecase. So all the buttons are being modified to have additional variants, etc. But if I then go a head and for example use the modal, it uses the regular buttons, not the modified buttons. This is the solution that I came up with, that allows me to tell the component to use these modified buttons instead.

Does this make sense? Is this an anti-pattern? Is there a more efficient/elegant solution to this?

€1: Here's a codesandbox demonstrating what this does: https://codesandbox.io/s/practical-ives-jxk3v

Answer 1

const defaultComponents = {
  button: BaseButton
}

export const Card = ({ components=defaultComponents, children }) => {
 
  return (
    <div className="card">
      <h2>Thing</h2>
      {children}
      <components.button className="card__button">Click me</components.button>
    </div>
  );
};

I don't know is this help. I will do like this. use = when you passing props in a function mean the default value of that prop.