react-useanimations 2.0.3 → 2.0.7

package/stories/controlled.stories.d.ts

@@ -5,13 +5,56 @@ declare const _default: {
         animation: import("../utils").Animation;
         reverse?: boolean | undefined;
         strokeColor?: string | undefined;
+        fillColor?: string | undefined;
         pathCss?: string | undefined;
         options?: Partial<import("lottie-web").AnimationConfig> | undefined;
         size?: number | undefined;
         loop?: number | boolean | undefined;
         autoplay?: boolean | undefined;
+        speed?: number | undefined;
         wrapperStyle?: React.CSSProperties | undefined;
+        render?: ((eventProps: any, animationProps: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | undefined;
     } & React.HTMLProps<HTMLDivElement>>;
+    decorators: any[];
 };
 export default _default;
-export declare const RadioButton: () => JSX.Element;
+export declare const RadioButton: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const ChangingStrokeColor: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const ChangingFillColor: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const ChangingPathCss: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};

package/stories/controlled.stories.js

@@ -5,12 +5,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RadioButton = exports["default"] = void 0;
+exports.ChangingPathCss = exports.ChangingFillColor = exports.ChangingStrokeColor = exports.RadioButton = exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _addonInfo = require("@storybook/addon-info");
+
 var _radioButton = _interopRequireDefault(require("../lib/radioButton"));
 
+var _star = _interopRequireDefault(require("../lib/star"));
+
 var _ = _interopRequireDefault(require(".."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -34,7 +38,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // ANIMATIONS WITH CLICK PLAY & BACKWARDS WILL HAVE REVERSE FUNCITONALITY FOR STATE MNG
 var _default = {
   title: 'Controlled State',
-  component: _["default"]
+  component: _["default"],
+  decorators: [_addonInfo.withInfo]
 };
 exports["default"] = _default;
 
@@ -66,4 +71,161 @@ var RadioButton = function RadioButton() {
   })));
 };
 
-exports.RadioButton = RadioButton;
+exports.RadioButton = RadioButton;
+RadioButton.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const RadioButton = () => {\n        const [checked, setChecked] = useState(true);\n      \n        return (\n          <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n            <div style={{ padding: '20px' }}>\n              <span>radioButton</span>\n              <UseAnimation\n                reverse={checked}\n                onClick={() => {\n                  setChecked(!checked);\n                }}\n                size={40}\n                wrapperStyle={{ marginTop: '5px' }}\n                animation={radioButton}\n              />\n            </div>\n          </div>\n        );\n      };\n      ~~~\n    "
+    }
+  }
+};
+
+var ChangingStrokeColor = function ChangingStrokeColor() {
+  var _useState3 = (0, _react.useState)('black'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      strokeColor = _useState4[0],
+      setStrokeColor = _useState4[1];
+
+  var handleButtonOnClick = function handleButtonOnClick() {
+    return strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: handleButtonOnClick,
+    style: {
+      width: 100,
+      height: 50
+    }
+  }, "Change Stroke Color"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "star"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    pathCss: "fill: pink",
+    strokeColor: strokeColor,
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _star["default"]
+  })));
+};
+
+exports.ChangingStrokeColor = ChangingStrokeColor;
+ChangingStrokeColor.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const ChangingStrokeColor = () => {\n        const [strokeColor, setStrokeColor] = useState('black');\n      \n        const handleButtonOnClick = () =>\n          strokeColor === 'black' ? setStrokeColor('red') : setStrokeColor('black');\n      \n        return (\n          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>\n            <button type=\"button\" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>\n              Change Stroke Color\n            </button>\n            <div style={{ padding: '20px' }}>\n              <span>star</span>\n              <UseAnimation\n                strokeColor={strokeColor}\n                size={40}\n                wrapperStyle={{ marginTop: '5px' }}\n                animation={star}\n              />\n            </div>\n          </div>\n        );\n      };\n      ~~~\n    "
+    }
+  }
+};
+
+var ChangingFillColor = function ChangingFillColor() {
+  var _useState5 = (0, _react.useState)('black'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fillColor = _useState6[0],
+      setFillColor = _useState6[1];
+
+  var handleButtonOnClick = function handleButtonOnClick() {
+    return fillColor === 'black' ? setFillColor('red') : setFillColor('black');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: handleButtonOnClick,
+    style: {
+      width: 100,
+      height: 50
+    }
+  }, "Change Fill Color"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "star"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fillColor: fillColor,
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _star["default"]
+  })));
+};
+
+exports.ChangingFillColor = ChangingFillColor;
+ChangingFillColor.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const ChangingFillColor = () => {\n        const [fillColor, setFillColor] = useState('black');\n      \n        const handleButtonOnClick = () =>\n          fillColor === 'black' ? setFillColor('red') : setFillColor('black');\n      \n        return (\n          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>\n            <button type=\"button\" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>\n              Change Fill Color\n            </button>\n            <div style={{ padding: '20px' }}>\n              <span>star</span>\n              <UseAnimation\n                fillColor={fillColor}\n                size={40}\n                wrapperStyle={{ marginTop: '5px' }}\n                animation={star}\n              />\n            </div>\n          </div>\n        );\n      };\n      ~~~\n    "
+    }
+  }
+};
+
+var ChangingPathCss = function ChangingPathCss() {
+  var defaultCssPath = 'fill: red; stroke: blue;';
+
+  var _useState7 = (0, _react.useState)(defaultCssPath),
+      _useState8 = _slicedToArray(_useState7, 2),
+      pathCss = _useState8[0],
+      setPathCss = _useState8[1];
+
+  var handleButtonOnClick = function handleButtonOnClick() {
+    return pathCss === defaultCssPath ? setPathCss('fill: blue; stroke: red;') : setPathCss(defaultCssPath);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: handleButtonOnClick,
+    style: {
+      width: 100,
+      height: 50
+    }
+  }, "Change Path Css"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      marginLeft: '20px'
+    }
+  }, "After changing, click the star back & forth to see the fill & stroke change taking an effect")), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "star"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    pathCss: pathCss,
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _star["default"]
+  })));
+};
+
+exports.ChangingPathCss = ChangingPathCss;
+ChangingPathCss.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const ChangingPathCss = () => {\n        const defaultCssPath = 'fill: red; stroke: blue;';\n        const [pathCss, setPathCss] = useState(defaultCssPath);\n      \n        const handleButtonOnClick = () =>\n          pathCss === defaultCssPath\n            ? setPathCss('fill: blue; stroke: red;')\n            : setPathCss(defaultCssPath);\n      \n        return (\n          <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'column' }}>\n            <div style={{ display: 'flex', alignItems: 'center' }}>\n              <button type=\"button\" onClick={handleButtonOnClick} style={{ width: 100, height: 50 }}>\n                Change Path Css\n              </button>\n              <span style={{ marginLeft: '20px' }}>\n                After changing, click the star back & forth to see the fill & stroke change taking an\n                effect\n              </span>\n            </div>\n            <div style={{ padding: '20px' }}>\n              <span>star</span>\n              <UseAnimation\n                pathCss={pathCss}\n                size={40}\n                wrapperStyle={{ marginTop: '5px' }}\n                animation={star}\n              />\n            </div>\n          </div>\n        );\n      };\n      ~~~\n    "
+    }
+  }
+};

package/stories/generated.stories.d.ts

@@ -5,12 +5,15 @@ declare const _default: {
         animation: import("../utils").Animation;
         reverse?: boolean | undefined;
         strokeColor?: string | undefined;
+        fillColor?: string | undefined;
         pathCss?: string | undefined;
         options?: Partial<import("lottie-web").AnimationConfig> | undefined;
         size?: number | undefined;
         loop?: number | boolean | undefined;
         autoplay?: boolean | undefined;
+        speed?: number | undefined;
         wrapperStyle?: React.CSSProperties | undefined;
+        render?: ((eventProps: any, animationProps: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | undefined;
     } & React.HTMLProps<HTMLDivElement>>;
 };
 export default _default;

package/stories/generated.stories.js

@@ -31,28 +31,42 @@ var _arrowUp = _interopRequireDefault(require("../lib/arrowUp"));
 
 var _arrowUpCircle = _interopRequireDefault(require("../lib/arrowUpCircle"));
 
+var _behance = _interopRequireDefault(require("../lib/behance"));
+
 var _bookmark = _interopRequireDefault(require("../lib/bookmark"));
 
 var _calendar = _interopRequireDefault(require("../lib/calendar"));
 
 var _checkBox = _interopRequireDefault(require("../lib/checkBox"));
 
+var _checkmark = _interopRequireDefault(require("../lib/checkmark"));
+
 var _codepen = _interopRequireDefault(require("../lib/codepen"));
 
 var _copy = _interopRequireDefault(require("../lib/copy"));
 
 var _download = _interopRequireDefault(require("../lib/download"));
 
+var _dribbble = _interopRequireDefault(require("../lib/dribbble"));
+
 var _edit = _interopRequireDefault(require("../lib/edit"));
 
+var _error = _interopRequireDefault(require("../lib/error"));
+
 var _explore = _interopRequireDefault(require("../lib/explore"));
 
 var _facebook = _interopRequireDefault(require("../lib/facebook"));
 
+var _folder = _interopRequireDefault(require("../lib/folder"));
+
 var _github = _interopRequireDefault(require("../lib/github"));
 
 var _heart = _interopRequireDefault(require("../lib/heart"));
 
+var _help = _interopRequireDefault(require("../lib/help"));
+
+var _home = _interopRequireDefault(require("../lib/home"));
+
 var _infinity = _interopRequireDefault(require("../lib/infinity"));
 
 var _info = _interopRequireDefault(require("../lib/info"));
@@ -147,6 +161,10 @@ var _youtube = _interopRequireDefault(require("../lib/youtube"));
 
 var _youtube2 = _interopRequireDefault(require("../lib/youtube2"));
 
+var _zoomIn = _interopRequireDefault(require("../lib/zoomIn"));
+
+var _zoomOut = _interopRequireDefault(require("../lib/zoomOut"));
+
 var _ = _interopRequireDefault(require(".."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -287,6 +305,16 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "behance"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _behance["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "bookmark"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -317,6 +345,16 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "checkmark"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _checkmark["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "codepen"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -347,6 +385,16 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "dribbble"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _dribbble["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "edit"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -357,6 +405,16 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "error"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _error["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "explore"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -377,6 +435,16 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "folder"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _folder["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "github"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -397,6 +465,26 @@ var All = function All() {
     style: {
       padding: '20px'
     }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "help"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _help["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "home"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _home["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
   }, /*#__PURE__*/_react["default"].createElement("span", null, "infinity"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: 40,
     wrapperStyle: {
@@ -863,6 +951,26 @@ var All = function All() {
       marginTop: '5px'
     },
     animation: _youtube2["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "zoomIn"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _zoomIn["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "zoomOut"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _zoomOut["default"]
   })));
 };
 

package/stories/variants.stories.d.ts

@@ -5,15 +5,66 @@ declare const _default: {
         animation: import("../utils").Animation;
         reverse?: boolean | undefined;
         strokeColor?: string | undefined;
+        fillColor?: string | undefined;
         pathCss?: string | undefined;
         options?: Partial<import("lottie-web").AnimationConfig> | undefined;
         size?: number | undefined;
         loop?: number | boolean | undefined;
         autoplay?: boolean | undefined;
+        speed?: number | undefined;
         wrapperStyle?: React.CSSProperties | undefined;
+        render?: ((eventProps: any, animationProps: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | undefined;
     } & React.HTMLProps<HTMLDivElement>>;
+    decorators: any[];
 };
 export default _default;
-export declare const Stroke: () => JSX.Element;
-export declare const CustomCSS: () => JSX.Element;
-export declare const Size: () => JSX.Element;
+export declare const Stroke: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const Fill: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const CustomCSS: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const Size: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
+export declare const WrapperElement: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};

package/stories/variants.stories.js

@@ -3,21 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Size = exports.CustomCSS = exports.Stroke = exports["default"] = void 0;
+exports.WrapperElement = exports.Size = exports.CustomCSS = exports.Fill = exports.Stroke = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _addonInfo = require("@storybook/addon-info");
+
 var _activity = _interopRequireDefault(require("../lib/activity"));
 
 var _youtube = _interopRequireDefault(require("../lib/youtube"));
 
+var _star = _interopRequireDefault(require("../lib/star"));
+
+var _heart = _interopRequireDefault(require("../lib/heart"));
+
 var _ = _interopRequireDefault(require(".."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var _default = {
   title: 'Variants',
-  component: _["default"]
+  component: _["default"],
+  decorators: [_addonInfo.withInfo]
 };
 exports["default"] = _default;
 
@@ -53,6 +62,53 @@ var Stroke = function Stroke() {
 };
 
 exports.Stroke = Stroke;
+Stroke.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const Stroke = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              strokeColor=\"green\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={activity}\n            />\n          </div>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              strokeColor=\"red\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={youtube}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
+    }
+  }
+};
+
+var Fill = function Fill() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "star"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fillColor: "green",
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _star["default"]
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '20px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "heart"), /*#__PURE__*/_react["default"].createElement(_["default"], {
+    fillColor: "red",
+    size: 40,
+    wrapperStyle: {
+      marginTop: '5px'
+    },
+    animation: _heart["default"]
+  })));
+};
+
+exports.Fill = Fill;
+Fill.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const Fill = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>star</span>\n            <UseAnimation\n              fillColor=\"green\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={star}\n            />\n          </div>\n          <div style={{ padding: '20px' }}>\n            <span>heart</span>\n            <UseAnimation\n              fillColor=\"red\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={heart}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
+    }
+  }
+};
 
 var CustomCSS = function CustomCSS() {
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -75,6 +131,13 @@ var CustomCSS = function CustomCSS() {
 };
 
 exports.CustomCSS = CustomCSS;
+CustomCSS.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const CustomCSS = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              size={40}\n              pathCss=\"stroke: purple; stroke-width: 2%;\"\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={activity}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
+    }
+  }
+};
 
 var Size = function Size() {
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -95,4 +158,39 @@ var Size = function Size() {
   })));
 };
 
-exports.Size = Size;
+exports.Size = Size;
+Size.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const Size = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />\n          </div>\n        </div>\n      );\n      ~~~\n    "
+    }
+  }
+};
+
+var WrapperElement = function WrapperElement() {
+  return /*#__PURE__*/_react["default"].createElement(_["default"], {
+    animation: _heart["default"],
+    size: 60,
+    onClick: function onClick() {
+      // eslint-disable-next-line
+      console.log('additional onClick cb is working');
+    },
+    render: function render(eventProps, animationProps) {
+      return /*#__PURE__*/_react["default"].createElement("button", _extends({
+        style: {
+          padding: '20px'
+        },
+        type: "button"
+      }, eventProps), /*#__PURE__*/_react["default"].createElement("div", animationProps));
+    }
+  });
+};
+
+exports.WrapperElement = WrapperElement;
+WrapperElement.story = {
+  parameters: {
+    info: {
+      text: "\n      ~~~js\n      export const WrapperElement = () => {\n        return (\n          <UseAnimation\n            animation={heart}\n            size={60}\n            onClick={() => {\n              // eslint-disable-next-line\n              console.log('additional onClick cb is working');\n            }}\n            render={(eventProps, animationProps) => (\n              <button style={{ padding: '20px' }} type=\"button\" {...eventProps}>\n                <div {...animationProps} />\n              </button>\n            )}\n          />\n        );\n      };\n      ~~~\n    "
+    }
+  }
+};

package/typings.d.ts

@@ -2,3 +2,5 @@ declare module '*.json' {
   const value: any;
   export default value;
 }
+
+declare module '@storybook/addon-info';