|
|
@ -20,9 +20,21 @@ function withTheme(Component) { |
|
|
|
// We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
|
|
|
|
// And it can then be attached to the Component.
|
|
|
|
// highlight-range{1-3}
|
|
|
|
return React.forwardRef((props, ref) => ( |
|
|
|
<ThemedComponent {...props} forwardedRef={ref} /> |
|
|
|
)); |
|
|
|
function refForwarder(props, ref) { |
|
|
|
return ( |
|
|
|
<ThemedComponent {...props} forwardedRef={ref} /> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
// These next lines are not necessary,
|
|
|
|
// But they do give the component a better display name in DevTools,
|
|
|
|
// e.g. "ForwardRef(withTheme(MyComponent))"
|
|
|
|
// highlight-range{1-2}
|
|
|
|
const name = Component.displayName || Component.name; |
|
|
|
refForwarder.displayName = `withTheme(${name})`; |
|
|
|
|
|
|
|
// highlight-next-line
|
|
|
|
return React.forwardRef(refForwarder); |
|
|
|
} |
|
|
|
|
|
|
|
// highlight-next-line
|
|
|
|