Update component API

- Non-documented API props are now spread onto the wrapper element.
- Some API props have been renamed for clarity.
- Tests updated to reflect the required wrapper elements.
- New test added regarding the presence of a parent element for SVGInjector, since this has been coming up a bit in the issue tracker.

MIGRATING.md

@@ -0,0 +1,17 @@
+# Migrating
+
+## v3 API Changes
+
+**Naming**
+
+- `callback` -> `onInjected`
+- `className` -> `svgClassName`
+- `style` -> `svgStyle`
+
+**Additions**
+
+All additional non-documented props will now be spread onto the wrapper element.
+
+**Removals**
+
+`wrapperClassName` has been removed. Instead, just pass `className` since it will be spread onto the wrapper element.

README.md

@@ -17,11 +17,14 @@ import ReactSVG from 'react-svg'
 ReactDOM.render(
   <ReactSVG
     path="atomic.svg"
-    callback={svg => {
-      console.log(svg)
+    onInjected={svg => {
+      console.log('onInjected', svg)
+    }}
+    svgClassName="svg-class-name"
+    className="wrapper-class-name"
+    onClick={() => {
+      console.log('wrapper onClick')
     }}
-    className="class-name"
-    wrapperClassName="wrapper-class-name"
   />,
   document.querySelector('.Root')
 )
@@ -34,24 +37,28 @@ There is a working version of the above in the `examples/basic` dir. First run `
 __Props__
 
 - `path` - Path to the SVG.
-- `callback` - *Optional* Function to call after the SVG is injected. Receives the newly injected SVG DOM element as a parameter. Defaults to `null`.
-- `className` - *Optional* Class name to be added to the SVG. Defaults to `''`.
-- `wrapperClassName` - *Optional* Class name to be added to the wrapping `div`. Defaults to `''`.
 - `evalScripts` - *Optional* Run any script blocks found in the SVG (`always`, `once`, or `never`). Defaults to `never`.
-- `style` - *Optional* Inline styles to be added to the SVG. Defaults to `{}`.
+- `onInjected` - *Optional* Function to call after the SVG is injected. Receives the injected SVG DOM element as a parameter. Defaults to `null`.
+- `svgClassName` - *Optional* Class name to be added to the injected SVG DOM element. Defaults to `null`.
+- `svgStyle` - *Optional* Inline styles to be added to the injected SVG DOM element. Defaults to `{}`.
+
+Other non-documented properties are applied to the wrapper element.
 
 __Example__
 
 ```js
 <ReactSVG
   path="atomic.svg"
-  callback={svg => {
-    console.log(svg)
+  evalScripts="always"
+  onInjected={svg => {
+    console.log('onInjected', svg)
+  }}
+  svgClassName="svg-class-name"
+  svgStyle={{ width: 200 }}
+  className="wrapper-classname"
+  onClick={() => {
+    console.log('wrapper onClick')
   }}
-  className="example"
-  wrapperClassName="example-wrapper-classname"
-  evalScript="always"
-  style={{ width: 200 }}
 />
 ```
 

examples/basic/index.js

@@ -5,12 +5,14 @@ import ReactSVG from '../../src'
 ReactDOM.render(
   <ReactSVG
     path="atomic.svg"
-    callback={svg => {
-      // eslint-disable-next-line no-console
-      console.log(svg)
+    onInjected={svg => {
+      console.log('onInjected', svg)
+    }}
+    svgClassName="svg-class-name"
+    className="wrapper-class-name"
+    onClick={() => {
+      console.log('wrapper onClick')
     }}
-    className="class-name"
-    wrapperClassName="wrapper-class-name"
   />,
   document.querySelector('.Root')
 )

examples/issue-49/fill/index.html

@@ -4,10 +4,10 @@
   <meta charset="utf-8">
   <title>issue 49 | fill | react-svg</title>
   <style>
-    .class-name g {
+    .svg-class-name g {
       fill: blue;
     }
-    .class-name:hover g {
+    .svg-class-name:hover g {
       fill: black;
     }
   </style>

examples/issue-49/fill/index.js

@@ -3,6 +3,6 @@ import ReactDOM from 'react-dom'
 import ReactSVG from '../../../src'
 
 ReactDOM.render(
-  <ReactSVG path="atomic.svg" className="class-name" />,
+  <ReactSVG path="atomic.svg" svgClassName="svg-class-name" />,
   document.querySelector('.Root')
 )

examples/issue-49/swap/index.js

@@ -16,8 +16,8 @@ class Swap extends React.Component {
       >
         <ReactSVG
           path={this.state.isHovered ? 'atomic-black.svg' : 'atomic-blue.svg'}
-          className="class-name"
-          wrapperClassName="wrapper-class-name"
+          svgClassName="svg-class-name"
+          className="wrapper-class-name"
         />
       </div>
     )