You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.0 KiB
36 lines
1.0 KiB
function withTheme(Component) {
|
|
// Note the second param "ref" provided by React.forwardRef.
|
|
// We can attach this to Component directly.
|
|
// highlight-range{1,5}
|
|
function ThemedComponent(props, ref) {
|
|
return (
|
|
<ThemeContext.Consumer>
|
|
{theme => (
|
|
<Component {...props} ref={ref} theme={theme} />
|
|
)}
|
|
</ThemeContext.Consumer>
|
|
);
|
|
}
|
|
|
|
// 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;
|
|
ThemedComponent.displayName = `withTheme(${name})`;
|
|
|
|
// Tell React to pass the "ref" to ThemedComponent.
|
|
// highlight-next-line
|
|
return React.forwardRef(ThemedComponent);
|
|
}
|
|
|
|
// highlight-next-line
|
|
const fancyButtonRef = React.createRef();
|
|
|
|
// fancyButtonRef will now point to FancyButton
|
|
// highlight-range{4}
|
|
<FancyThemedButton
|
|
label="Click me!"
|
|
onClick={handleClick}
|
|
ref={fancyButtonRef}
|
|
/>;
|
|
|