feat: use React.forwardRef

BREAKING CHANGE:

"ref" option now uses `React.forwardRef`. You don't have to use "svgRef"
prop, just use "ref" and it will work. `React.forwardRef` requires React
> 16.3.

Closes #184

Author: gregberge

README.md

@@ -106,7 +106,7 @@ Options:
   --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
   --icon                             use "1em" as width and height
   --native                           add react-native support with react-native-svg
-  --ref                              add svgRef prop to svg
+  --ref                              forward ref to SVG root element
   --no-dimensions                    remove width and height from root SVG tag
   --no-expand-props                  disable props expanding
   --svg-attributes <property=value>  add attributes to the svg element (deprecated)
@@ -377,7 +377,7 @@ Specify SVGO config. [See SVGO options](https://gist.github.com/pladaria/69321af
 
 ### Ref
 
-Setting this to `true` will allow you to hook into the ref of the svg components that are created by exposing a `svgRef` prop
+Setting this to `true` will forward ref to the root SVG tag.
 
 | Default | CLI Override | API Override  |
 | ------- | ------------ | ------------- |

packages/cli/README.md

@@ -25,7 +25,7 @@ Options:
   --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
   --icon                             use "1em" as width and height
   --native                           add react-native support with react-native-svg
-  --ref                              add svgRef prop to svg
+  --ref                              forward ref to SVG root element
   --no-dimensions                    remove width and height from root SVG tag
   --no-expand-props                  disable props expanding
   --svg-attributes <property=value>  add attributes to the svg element (deprecated)

packages/cli/src/__snapshots__/index.test.js.snap

@@ -290,7 +290,11 @@ const SvgFile = ({ svgRef, ...props }) => (
   </svg>
 )
 
-export default SvgFile
+const ForwardRef = React.forwardRef((props, ref) => (
+  <SvgFile svgRef={ref} {...props} />
+))
+
+export default ForwardRef
 
 "
 `;

packages/cli/src/index.js

@@ -51,7 +51,7 @@ program
   )
   .option('--icon', 'use "1em" as width and height')
   .option('--native', 'add react-native support with react-native-svg')
-  .option('--ref', 'add svgRef prop to svg')
+  .option('--ref', 'forward ref to SVG root element')
   .option('--no-dimensions', 'remove width and height from root SVG tag')
   .option('--no-expand-props', 'disable props expanding')
   .option(

packages/core/src/__snapshots__/convert.test.js.snap

@@ -198,7 +198,11 @@ const SvgComponent = ({ svgRef, ...props }) => (
   </svg>
 )
 
-export default SvgComponent
+const ForwardRef = React.forwardRef((props, ref) => (
+  <SvgComponent svgRef={ref} {...props} />
+))
+
+export default ForwardRef
 "
 `;
 

packages/core/src/templates/__snapshots__/reactDomTemplate.test.js.snap

@@ -21,7 +21,9 @@ exports[`reactDomTemplate should wrap code into a component 3`] = `
 
 const Test = ({ svgRef }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;
 
 exports[`reactDomTemplate should wrap code into a component 4`] = `
@@ -37,7 +39,9 @@ exports[`reactDomTemplate should wrap code into a component 5`] = `
 
 const Test = ({ svgRef, title }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;
 
 exports[`reactDomTemplate should wrap code into a component 6`] = `
@@ -53,5 +57,7 @@ exports[`reactDomTemplate should wrap code into a component 7`] = `
 
 const Test = ({ svgRef, ...props }) => <Svg />
 
-export default Test"
+const ForwardRef = React.forwardRef((props, ref) => <Test svgRef={ref} {...props} />)
+
+export default ForwardRef"
 `;

packages/core/src/templates/reactDomTemplate.js

@@ -1,20 +1,12 @@
-import { getProps } from './util'
+import { getProps, getExport, getForwardRef } from './util'
 
 const reactDomTemplate = (code, config, state) => {
-  const props = getProps(config)
+  const props = getProps(config, state)
 
   let result = `import React from 'react'\n\n`
   result += `const ${state.componentName} = ${props} => ${code}\n\n`
-
-  if (state.webpack && state.webpack.previousExport) {
-    result += `export default ${state.webpack.previousExport}\n`
-    result += `export { ${state.componentName} as ReactComponent }`
-  } else if (state.rollup && state.rollup.previousExport) {
-    result += `${state.rollup.previousExport}\n`
-    result += `export { ${state.componentName} as ReactComponent }`
-  } else {
-    result += `export default ${state.componentName}`
-  }
+  result += getForwardRef(config, state)
+  result += getExport(config, state)
 
   return result
 }

packages/core/src/templates/util.js

@@ -9,3 +9,27 @@ export const getProps = config => {
 
   return `({ ${props.join(', ')} })`
 }
+
+export const getExport = (config, state) => {
+  const component = config.ref ? 'ForwardRef' : state.componentName
+  if (state.webpack && state.webpack.previousExport) {
+    let result = ''
+    result += `export default ${state.webpack.previousExport}\n`
+    result += `export { ${component} as ReactComponent }`
+    return result
+  }
+  if (state.rollup && state.rollup.previousExport) {
+    let result = ''
+    result += `${state.rollup.previousExport}\n`
+    result += `export { ${component} as ReactComponent }`
+    return result
+  }
+  return `export default ${component}`
+}
+
+export const getForwardRef = (config, state) => {
+  if (!config.ref) return ''
+  return `const ForwardRef = React.forwardRef((props, ref) => <${
+    state.componentName
+  } svgRef={ref} {...props} />)\n\n`
+}