[withStyles] Conditionally forward ref to inner component

React.forwardRef was added in React 16.3, but since this package still supports older versions of React, we conditionally fork the application of the forwarded ref. We will remove the fork in favor of always forwarding the ref in a later breaking change version. context: #240 (comment)

Author: Austin Wood

src/withStyles.jsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import getComponentName from 'airbnb-prop-types/build/helpers/getComponentName';
+import ref from 'airbnb-prop-types/build/ref';
 
 import EMPTY_STYLES_FN from './utils/emptyStylesFn';
 import withPerf from './utils/perf';
@@ -232,8 +233,10 @@ export function withStyles(
 
  return (
  <WrappedComponent
- ref={forwardedRef}
- {...rest}
+ // TODO: remove conditional once breaking change to only support React 16.3+
+ // ref: https://github.com/airbnb/react-with-styles/pull/240#discussion_r533497857
+ ref={typeof React.forwardRef === 'undefined' ? undefined : forwardedRef}
+ {...(typeof React.forwardRef === 'undefined' ? this.props : rest)}
  {...{
  [themePropName]: theme,
  [stylesPropName]: styles,
@@ -244,9 +247,21 @@ export function withStyles(
  }
  }
 
- const ForwardedWithStyles = React.forwardRef((props, ref) => (
- <WithStyles {...props} forwardedRef={ref} />
- ));
+ // TODO: remove conditional once breaking change to only support React 16.3+
+ // ref: https://github.com/airbnb/react-with-styles/pull/240#discussion_r533497857
+ if (typeof React.forwardRef !== 'undefined') {
+ WithStyles.propTypes = {
+ forwardedRef: ref(),
+ };
+ }
+
+ // TODO: remove conditional once breaking change to only support React 16.3+
+ // ref: https://github.com/airbnb/react-with-styles/pull/240#discussion_r533497857
+ const ForwardedWithStyles = typeof React.forwardRef === 'undefined'
+ ? WithStyles
+ : React.forwardRef((props, forwardedRef) => (
+ <WithStyles {...props} forwardedRef={forwardedRef} />
+ ));
 
  // Copy the wrapped component's prop types and default props on WithStyles
  if (WrappedComponent.propTypes) {