Support for overriding prop values

Not sure if this functionality is already available, but currently, if you provide another component to an attribute, the JSX that is rendered shows the value of the object instead of the displayName. For example: <Accordion.Toggle as={Card.Header} > is rendered like: <Accordion.Toggle as={{ $$typeof: Symbol(react.forward_ref), defaultProps: undefined, displayName: 'Card.Header', render: function noRefCheck() {} }} >

I would like to only show the displayName in this scenario. Is there a way to override the string the attribute returns?

If not, maybe we can make a slight adjustment to options.filterProps to work similarly to options.displayName? If you provide a function, and that function returns a string that isn’t a boolean, use that new string for the attribute value instead.

Sound good?

[dvnrsn]

This would be nice for really lengthy prop values as well. Say one has a long array of objects. It’d be nice to be able to render something like array or [{}, {}]

[as-zlynn-philipps]

Thanks for your work, @probablyup. I hope it gets merged. Although, it doesn’t really address the need to format prop values on the fly as an escape hatch. I believe that would still be useful.