diff --git a/example/.storybook/addons.js b/example/.storybook/addons.js
index bc646c9..d3cbca5 100644
--- a/example/.storybook/addons.js
+++ b/example/.storybook/addons.js
@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-knobs/register';
+import 'storybook-addon-jsx/register';
diff --git a/example/.storybook/config.js b/example/.storybook/config.js
index ac3159c..c58d7ba 100644
--- a/example/.storybook/config.js
+++ b/example/.storybook/config.js
@@ -1,7 +1,11 @@
 
 import React from 'react';
-import { configure, addDecorator } from '@storybook/react';
+import { configure, addDecorator, setAddon } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
+import JSXAddon from 'storybook-addon-jsx';
+
+//with JSX addon
+setAddon(JSXAddon);
 
 //global decorator applied to every story
 addDecorator(story => (
diff --git a/example/package-lock.json b/example/package-lock.json
index 5fc6d10..86445d7 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -1161,11 +1161,32 @@
         }
       }
     },
+    "@types/commander": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/@types/commander/-/commander-2.12.2.tgz",
+      "integrity": "sha512-0QEFiR8ljcHp9bAbWxecjVRuAMr16ivPiGOw6KFQBVrVd0RQIcM3xKdRisH2EDWgVWujiYtHwhSkSUoAAGzH7Q==",
+      "dev": true,
+      "requires": {
+        "commander": "*"
+      }
+    },
+    "@types/semver": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==",
+      "dev": true
+    },
     "abab": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
       "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -4080,6 +4101,16 @@
         "typedarray": "^0.0.6"
       }
     },
+    "config-chain": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "configstore": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
@@ -4174,6 +4205,15 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha512-c3GdeY8qxCHGezVb1EFQfHYK/8NZRemgcTIzPq7PuxjHAf/raKibn2QdhHPb/y6q74PMgH6yizaDZlRmw6QyKw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.3"
+      }
+    },
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@@ -4951,6 +4991,20 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "editorconfig": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.0.tgz",
+      "integrity": "sha512-j7JBoj/bpNzvoTQylfRZSc85MlLNKWQiq5y6gwKhmqD2h1eZ+tH4AXbkhEJD468gjDna/XMx2YtSkCxBRX9OGg==",
+      "dev": true,
+      "requires": {
+        "@types/commander": "^2.11.0",
+        "@types/semver": "^5.4.0",
+        "commander": "^2.11.0",
+        "lru-cache": "^4.1.1",
+        "semver": "^5.4.1",
+        "sigmund": "^1.0.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6098,13 +6152,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6117,18 +6169,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6231,8 +6280,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6242,7 +6290,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6255,7 +6302,6 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -6355,8 +6401,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6610,6 +6655,12 @@
       "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=",
       "dev": true
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz",
+      "integrity": "sha512-TtY/sbOemiMKPRUDDanGCSgBYe7Mf0vbRsWnBZ+9yghpZ1MvcpSpuZFjHdEeY/LZjZy0vdLjS77L6HosisFiug==",
+      "dev": true
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -7718,6 +7769,12 @@
         "has": "^1.0.1"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
@@ -8207,6 +8264,18 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
       "integrity": "sha512-xcinL3AuDJk7VSzsHgb9DvvIXayBbadtMZ4HFPx8rUszbW1MuNMlwYVC4zzCZ6e1sqZpnNS5ZFYOhXqA39T7LQ=="
     },
+    "js-beautify": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.8.6.tgz",
+      "integrity": "sha512-TYDZa+lg8vEC5U0OmGQEEwiZ0XFBfvZAUeNOtqflLe+woKuIqF4JzlsBx/C1KVYW5lUewZy2ODL4Obq6sH7a4Q==",
+      "dev": true,
+      "requires": {
+        "config-chain": "~1.1.5",
+        "editorconfig": "^0.15.0",
+        "mkdirp": "~0.5.0",
+        "nopt": "~4.0.1"
+      }
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9215,6 +9284,16 @@
         "which": "^1.3.0"
       }
     },
+    "nopt": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+      "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -9520,6 +9599,16 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "p-cancelable": {
       "version": "0.4.1",
       "resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
@@ -11107,6 +11196,12 @@
         "object-assign": "^4.1.1"
       }
     },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
+      "dev": true
+    },
     "protocols": {
       "version": "1.4.6",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-1.4.6.tgz",
@@ -11366,6 +11461,16 @@
         "tinycolor2": "^1.4.1"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
+      "integrity": "sha512-ELKq31/E3zjFs5rDWNCfFL4NvNFQvGRoJdAKReD/rUPA+xxiLPQmZBZBvy2vgH7V0GE9isIQpT9WXbwIVErYdA==",
+      "dev": true,
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-datetime": {
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/react-datetime/-/react-datetime-2.15.0.tgz",
@@ -11437,6 +11542,16 @@
         "schedule": "^0.5.0"
       }
     },
+    "react-element-to-jsx-string": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.0.1.tgz",
+      "integrity": "sha512-jip3ekJWR3rxYPBpeiWa5X1yGgQ8geCQd+j+7e8YPMPVHXbGPxHjH7EBnD0Ctm1Zi0+JnoVvnFgczo9QmtnQOg==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "2.0.4",
+        "stringify-object": "3.2.2"
+      }
+    },
     "react-error-overlay": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
@@ -23350,6 +23465,12 @@
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -23669,6 +23790,17 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
+    "storybook-addon-jsx": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.4.0.tgz",
+      "integrity": "sha512-yOz66htRawpS9+YPN+bbgENhMV0sCq5fwJcyRPDn+3YbrkLBagBd56pWPNi554x2VtU29J52SlmviEa+Xt3UKg==",
+      "dev": true,
+      "requires": {
+        "js-beautify": "^1.7.5",
+        "react-copy-to-clipboard": "^5.0.1",
+        "react-element-to-jsx-string": "^14.0.1"
+      }
+    },
     "stream-browserify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
@@ -23786,6 +23918,17 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "stringify-object": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.2.tgz",
+      "integrity": "sha512-O696NF21oLiDy8PhpWu8AEqoZHw++QW6mUv0UvKZe8gWSdSvMXkiLufK7OmnP27Dro4GU5kb9U7JIO0mBuCRQg==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^2.0.1",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -24099,6 +24242,12 @@
         }
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
diff --git a/example/package.json b/example/package.json
index b3f5e47..01d9a1c 100644
--- a/example/package.json
+++ b/example/package.json
@@ -28,6 +28,7 @@
     "@storybook/react": "3.4.11",
     "@storybook/storybook-deployer": "2.3.0",
     "babel-core": "6.26.3",
-    "babel-runtime": "6.26.0"
+    "babel-runtime": "6.26.0",
+    "storybook-addon-jsx": "5.4.0"
   }
 }
diff --git a/example/src/stories/ImageFadeIn.story.jsx b/example/src/stories/ImageFadeIn.story.jsx
index 8c36cc2..d6e7067 100644
--- a/example/src/stories/ImageFadeIn.story.jsx
+++ b/example/src/stories/ImageFadeIn.story.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf, forceReRender } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { text, boolean, object, number } from '@storybook/addon-knobs';
 import './styles.css';
 
@@ -23,16 +22,15 @@ const withReRender = (component) => {
 }
 
 storiesOf('ImageFadeIn', module)
-    .add('with image', () => {
+    .addWithJSX('with image', () => {
 
         return withReRender(
             <ImageFadeIn
                 width="350px"
-                onClick={action('image clicked!')}
                 opacityTransition={number('opacityTransition (seconds)', 3)}
                 src={text('src', "https://github.com/raw/patricktran/react-image-fade-in/master/nismo-dog.jpg")} />);
     })
-    .add('load as background image', () => {
+    .addWithJSX('load as background image', () => {
 
         return withReRender(<ImageFadeIn
             style={object('style', {