Actualmente estoy trabajando en un escenario, donde necesito poder importar un componente de la biblioteca, pero le digo que elija diferentes componentes para que algunos de sus componentes secundarios se rendericen. En este caso, necesita elegir diferentes componentes del botón, por ejemplo. Ahora ya tengo esto funcionando, como en, hace lo que debe hacer, pero me pregunto si tal vez haya una forma más adecuada/apropiada de hacerlo.

 export const container = ({component, children}) => { const ButtonComponent = component?.button ?? Button; return ( <div> <ButtonComponent size="large">Do something</ButtonComponent> </div> ) }

En este caso, los Botones se definen en esta misma biblioteca, pero del lado de la aplicación donde se consume la biblioteca, se modifican los botones, se agregan variantes, se agregan algunas propiedades que no son parte del componente original de la biblioteca. Y le estoy diciendo al componente que use un componente diferente como este:

 <container component={FancyButton} />

Como dije, esto funciona, pero parece que podría haber una solución más elegante para esto. Esto es relevante porque la biblioteca usa un enfoque de metodología de diseño atómico, donde algunos de los componentes más complejos usan componentes menos complejos, pero se modifican para un caso de uso específico. Entonces, todos los botones se están modificando para tener variantes adicionales, etc. Pero si luego voy a la cabeza y, por ejemplo, uso el modal, usa los botones normales, no los botones modificados. Esta es la solución que se me ocurrió, que me permite decirle al componente que use estos botones modificados en su lugar.

¿Esto tiene sentido? ¿Es esto un antipatrón? ¿Hay una solución más eficiente/elegante para esto?

1 €: aquí hay un codesandbox que demuestra lo que hace: https://codesandbox.io/s/practical-ives-jxk3v