react-useanimations 2.0.6 → 2.0.7

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,6 +5,7 @@ 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;

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,6 +5,7 @@ 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;
@@ -27,6 +28,16 @@ export declare const Stroke: {
         };
     };
 };
+export declare const Fill: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            info: {
+                text: string;
+            };
+        };
+    };
+};
 export declare const CustomCSS: {
     (): JSX.Element;
     story: {

package/stories/variants.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperElement = 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"));
 
@@ -13,6 +13,8 @@ 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(".."));
@@ -68,6 +70,46 @@ Stroke.story = {
   }
 };
 
+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", {
     style: {

package/utils/constants.d.ts

@@ -3,4 +3,4 @@ export declare type Animation = {
     animationData: any;
     animationKey: AnimationKey;
 };
-export declare type AnimationKey = 'activity' | 'airplay' | 'alertCircle' | 'alertOctagon' | 'alertTriangle' | 'archive' | 'arrowDown' | 'arrowDownCircle' | 'arrowLeftCircle' | 'arrowRightCircle' | 'arrowUp' | 'arrowUpCircle' | 'bookmark' | 'calendar' | 'checkBox' | 'codepen' | 'copy' | 'download' | 'edit' | 'explore' | 'facebook' | 'github' | 'heart' | 'infinity' | 'info' | 'instagram' | 'linkedin' | 'loading' | 'loading2' | 'loading3' | 'lock' | 'mail' | 'maximizeMinimize' | 'maximizeMinimize2' | 'menu' | 'menu2' | 'menu3' | 'menu4' | 'microphone' | 'microphone2' | 'notification' | 'notification2' | 'playPause' | 'playPauseCircle' | 'plusToX' | 'pocket' | 'radioButton' | 'scrollDown' | 'searchToX' | 'settings' | 'settings2' | 'share' | 'skipBack' | 'skipForward' | 'star' | 'thumbUp' | 'toggle' | 'trash' | 'trash2' | 'twitter' | 'userMinus' | 'userPlus' | 'userX' | 'video' | 'video2' | 'visibility' | 'visibility2' | 'volume' | 'youtube' | 'youtube2';
+export declare type AnimationKey = 'activity' | 'airplay' | 'alertCircle' | 'alertOctagon' | 'alertTriangle' | 'archive' | 'arrowDown' | 'arrowDownCircle' | 'arrowLeftCircle' | 'arrowRightCircle' | 'arrowUp' | 'arrowUpCircle' | 'bookmark' | 'behance' | 'calendar' | 'checkBox' | 'checkmark' | 'codepen' | 'copy' | 'download' | 'dribbble' | 'edit' | 'error' | 'explore' | 'facebook' | 'folder' | 'github' | 'heart' | 'help' | 'home' | 'infinity' | 'info' | 'instagram' | 'linkedin' | 'loading' | 'loading2' | 'loading3' | 'lock' | 'mail' | 'maximizeMinimize' | 'maximizeMinimize2' | 'menu' | 'menu2' | 'menu3' | 'menu4' | 'microphone' | 'microphone2' | 'notification' | 'notification2' | 'playPause' | 'playPauseCircle' | 'plusToX' | 'pocket' | 'radioButton' | 'scrollDown' | 'searchToX' | 'settings' | 'settings2' | 'share' | 'skipBack' | 'skipForward' | 'star' | 'thumbUp' | 'toggle' | 'trash' | 'trash2' | 'twitter' | 'userMinus' | 'userPlus' | 'userX' | 'video' | 'video2' | 'visibility' | 'visibility2' | 'volume' | 'youtube' | 'youtube2' | 'zoomIn' | 'zoomOut';

package/utils/getEffect.js

@@ -18,16 +18,23 @@ var animations = {
   arrowUp: 'LOOP_PLAY',
   arrowUpCircle: 'CLICK_PLAY_AND_BACKWARDS',
   bookmark: 'CLICK_PLAY_AND_BACKWARDS',
+  behance: 'HOVER_PLAY_AND_STOP',
   calendar: 'HOVER_PLAY_AND_STOP',
   checkBox: 'CLICK_PLAY_AND_BACKWARDS',
+  checkmark: 'LOOP_PLAY',
   codepen: 'HOVER_PLAY_AND_STOP',
   copy: 'CLICK_PLAY',
   download: 'CLICK_PLAY',
+  dribbble: 'HOVER_PLAY_AND_BACKWARDS',
   edit: 'CLICK_PLAY',
+  error: 'LOOP_PLAY',
   explore: 'HOVER_PLAY_AND_BACKWARDS',
   facebook: 'HOVER_PLAY_AND_STOP',
+  folder: 'HOVER_PLAY_AND_STOP',
   github: 'HOVER_PLAY_AND_STOP',
+  help: 'LOOP_PLAY',
   heart: 'CLICK_PLAY_AND_BACKWARDS',
+  home: 'HOVER_PLAY_AND_STOP',
   infinity: 'LOOP_PLAY',
   info: 'HOVER_PLAY_AND_BACKWARDS',
   instagram: 'HOVER_PLAY_AND_STOP',
@@ -74,7 +81,9 @@ var animations = {
   visibility2: 'CLICK_PLAY_AND_BACKWARDS',
   volume: 'CLICK_PLAY_AND_BACKWARDS',
   youtube: 'HOVER_PLAY_AND_STOP',
-  youtube2: 'HOVER_PLAY_AND_STOP'
+  youtube2: 'HOVER_PLAY_AND_STOP',
+  zoomIn: 'LOOP_PLAY',
+  zoomOut: 'LOOP_PLAY'
 };
 
 var getEffect = function getEffect(animationKey) {

package/README.md

@@ -1,109 +0,0 @@
-## React UseAnimations Icons
-
-[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)
-
-#### What is react-useanimations?
-
-React-useanimations is a collection of free animated open source icons for React.js.
-
-#### Collection
-
-[https://react.useanimations.com](https://react.useanimations.com/) and play with examples or visit our [Storybook](https://useanimations.github.io/react-useanimations/)
-
-![](useanimations-preview.gif)
-
-### Installation
-
-Using Yarn:
-
-```
-yarn add react-useanimations
-```
-
-or using NPM:
-
-```
-npm install -S react-useanimations
-```
-
-### Usage
-If you still need to use v1, please refer to this README instead - [react-useanimations@v1](https://github.com/useAnimations/react-useanimations/blob/master/README_v1.md)
-
-Basic usage
-```javascript
-import React from 'react';
-import UseAnimations from 'react-useanimations';
-// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
-import github from 'react-useanimations/lib/github'
-
-const App = () => <UseAnimations animation={github} />;
-
-export default App;
-```
-
-Icons can be configured with inline props:
-
-```javascript
-<UseAnimations animation={github} size={56} wrapperStyle={{ padding: 100 }} />
-```
-
-These props are available:
-| Prop           | Default      | Definition   |
-| :------------- | :----------: | -----------: |
-| animation   | / | animation file |
-|  size | `24`   | animation size    |
-|  strokeColor | `'inherit'`   | animation color |
-|  wrapperStyle | `{}` | wrapper div styles |
-|  pathCss | `''` | css string for the animation path element |
-|  reverse | `false` | assing to `true` when eg. checkbox should be checked initally |
-|  autoplay | `false`* | false except in animations like loading etc. |
-|  loop | `false`* | false except in animations like loading etc. |
-|  options | `{}` | provide any other custom options which will override the default ones |
-|  speed | `1` | a number to determine the speed of lottie(1 is normal speed) |
-
-<br />
-Controlled checkbox example  
-
-```javascript
-export const RadioButton = () => {
-  // JUST EXAMPLE - THIS PART OF THE STATE WILL PROBABLY COME FROM A PARENT FORM COMPONENT
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <span>radioButton</span>
-      <UseAnimation
-        reverse={checked}
-        onClick={() => {
-          setChecked(!checked);
-        }}
-        size={40}
-        wrapperStyle={{ marginTop: '5px' }}
-        animation={radioButton}
-      />
-    </div>
-  );
-};
-```
-
-Animation wrapped in element (use render prop).
-```javascript
-export const WrapperElement = () => {
-  return (
-    <UseAnimation
-      animation={heart}
-      size={60}
-      onClick={() => {
-        // eslint-disable-next-line
-        console.log('additional onClick cb is working');
-      }}
-      render={(eventProps, animationProps) => (
-        <button style={{ padding: '20px' }} type="button" {...eventProps}>
-          <div {...animationProps} />
-        </button>
-      )}
-    />
-  );
-};
-```
- Note that `eventProps` consists of `onClick`, `mouseOver` and other DOM events which you probably want to assign to your wrapping element (e.g. Button) and `animationProps` consist of an actual animation which you should spread inside a simple `<div>`