Really interesting, thanks for sharing ! I'm really curious to test out this pattern and see how it goes when the "variant" components (the Text components in your example) tend to vary in terms of props, including some additional ones that may need to come from above ! Might be a little tricky
That will bring some load to Box.js as it will need to know about these props.
If the overall output of the text components remains the same — meaning that at the end they still return text with the same structure — but the props change, you can do something like that:
Really interesting, thanks for sharing ! I'm really curious to test out this pattern and see how it goes when the "variant" components (the Text components in your example) tend to vary in terms of props, including some additional ones that may need to come from above ! Might be a little tricky
That will bring some load to
Box.js
as it will need to know about these props.If the overall output of the text components remains the same — meaning that at the end they still return text with the same structure — but the props change, you can do something like that:
Or render (not assign)
<TextComponent />
as part of the Box's conditional logic. It is a matter of taste.