Use forwardRef rather than custom forwardedRef prop (#503)

Author: cpmsmith

index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CSSProperties, SVGAttributes } from 'react'
+import { CSSProperties, SVGAttributes, RefAttributes } from 'react'
 import {
   Transform,
   IconProp,
@@ -20,8 +20,7 @@ export type Props = FontAwesomeIconProps
 // This is identical to the version of Omit in Typescript 3.5. It is included for compatibility with older versions of Typescript.
 type BackwardCompatibleOmit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
-export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'> {
-  forwardedRef?: ((e: any) => void) | React.MutableRefObject<any> | null
+export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>, RefAttributes<SVGSVGElement> {
   icon: IconProp
   mask?: IconProp
   maskId?: string

index.es.js

@@ -195,7 +195,7 @@ function camelize(string) {
   return string.substr(0, 1).toLowerCase() + string.substr(1);
 }
 
-var _excluded$1 = ["style"];
+var _excluded = ["style"];
 
 function capitalize(val) {
   return val.charAt(0).toUpperCase() + val.slice(1);
@@ -256,7 +256,7 @@ function convert(createElement, element) {
 
   var _extraProps$style = extraProps.style,
       existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
-      remaining = _objectWithoutProperties(extraProps, _excluded$1);
+      remaining = _objectWithoutProperties(extraProps, _excluded);
 
   mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);
   /* eslint-enable */
@@ -328,11 +328,7 @@ function objectWithKey(key, value) {
   return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
 }
 
-var _excluded = ["forwardedRef"];
-function FontAwesomeIcon(_ref) {
-  var forwardedRef = _ref.forwardedRef,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+var FontAwesomeIcon = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var iconArgs = props.icon,
       maskArgs = props.mask,
       symbol = props.symbol,
@@ -358,7 +354,7 @@ function FontAwesomeIcon(_ref) {
 
   var abstract = renderedIcon.abstract;
   var extraProps = {
-    ref: forwardedRef
+    ref: ref
   };
   Object.keys(props).forEach(function (key) {
     // eslint-disable-next-line no-prototype-builtins
@@ -367,7 +363,7 @@ function FontAwesomeIcon(_ref) {
     }
   });
   return convertCurry(abstract[0], extraProps);
-}
+});
 FontAwesomeIcon.displayName = 'FontAwesomeIcon';
 FontAwesomeIcon.propTypes = {
   beat: PropTypes.bool,

index.js

@@ -202,7 +202,7 @@
     return string.substr(0, 1).toLowerCase() + string.substr(1);
   }
 
-  var _excluded$1 = ["style"];
+  var _excluded = ["style"];
 
   function capitalize(val) {
     return val.charAt(0).toUpperCase() + val.slice(1);
@@ -263,7 +263,7 @@
 
     var _extraProps$style = extraProps.style,
         existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,
-        remaining = _objectWithoutProperties(extraProps, _excluded$1);
+        remaining = _objectWithoutProperties(extraProps, _excluded);
 
     mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);
     /* eslint-enable */
@@ -335,11 +335,7 @@
     return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};
   }
 
-  var _excluded = ["forwardedRef"];
-  function FontAwesomeIcon(_ref) {
-    var forwardedRef = _ref.forwardedRef,
-        props = _objectWithoutProperties(_ref, _excluded);
-
+  var FontAwesomeIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
     var iconArgs = props.icon,
         maskArgs = props.mask,
         symbol = props.symbol,
@@ -365,7 +361,7 @@
 
     var abstract = renderedIcon.abstract;
     var extraProps = {
-      ref: forwardedRef
+      ref: ref
     };
     Object.keys(props).forEach(function (key) {
       // eslint-disable-next-line no-prototype-builtins
@@ -374,7 +370,7 @@
       }
     });
     return convertCurry(abstract[0], extraProps);
-  }
+  });
   FontAwesomeIcon.displayName = 'FontAwesomeIcon';
   FontAwesomeIcon.propTypes = {
     beat: PropTypes__default["default"].bool,

package.json

@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-    "react": ">=16.x"
+    "react": ">=16.3"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

src/components/FontAwesomeIcon.js

@@ -7,7 +7,7 @@ import objectWithKey from '../utils/object-with-key'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-export default function FontAwesomeIcon({ forwardedRef, ...props }) {
+const FontAwesomeIcon = React.forwardRef((props, ref) => {
   const {
     icon: iconArgs,
     mask: maskArgs,
@@ -48,7 +48,7 @@ export default function FontAwesomeIcon({ forwardedRef, ...props }) {
   }
 
   const { abstract } = renderedIcon
-  const extraProps = { ref: forwardedRef }
+  const extraProps = { ref }
 
   Object.keys(props).forEach(key => {
     // eslint-disable-next-line no-prototype-builtins
@@ -58,7 +58,7 @@ export default function FontAwesomeIcon({ forwardedRef, ...props }) {
   })
 
   return convertCurry(abstract[0], extraProps)
-}
+})
 
 FontAwesomeIcon.displayName = 'FontAwesomeIcon'
 
@@ -172,4 +172,6 @@ FontAwesomeIcon.defaultProps = {
   swapOpacity: false
 }
 
+export default FontAwesomeIcon
+
 const convertCurry = convert.bind(null, React.createElement)

src/components/__tests__/FontAwesomeIcon.test.js

@@ -471,7 +471,7 @@ describe('using ref', () => {
     const spy = jest.fn(element => element)
 
     mount(
-      { icon: faCoffee, forwardedRef: spy },
+      { icon: faCoffee, ref: spy },
       {
         createNodeMock: () => node
       }
@@ -486,7 +486,7 @@ describe('using ref', () => {
     const setForwardedRef = element => (forwardedRef = element)
 
     mount(
-      { icon: faCoffee, forwardedRef: setForwardedRef },
+      { icon: faCoffee, ref: setForwardedRef },
       {
         createNodeMock: () => node
       }