react v16.3.0 medium 05

medium_react_v16.3.0_05.js

function withTheme(Component) {
  function ThemedComponent({forwardedRef, ...rest}) {
    return (
      <ThemeContext.Consumer>
        {theme => (
          // Assign the custom prop "forwardedRef" as a ref
          <Component
            {...rest}
            ref={forwardedRef}
            theme={theme}
          />

        )}
      </ThemeContext.Consumer>
    );
  }

  // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to ThemedComponent as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => (
    <ThemedComponent {...props} forwardedRef={ref} />
  ));
}

const fancyButtonRef = React.createRef();

// fancyButtonRef will now point to FancyButton
<FancyThemedButton
  label="Click me!"
  onClick={handleClick}
  ref={fancyButtonRef}
/>;