fix useAnimateKeyFrames run when state update (#79)

package.json

@@ -44,21 +44,21 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.0.0",
+    "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.2",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
     "lint-staged": "^10.2.6",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
+    "prettier": "^2.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "rollup": "^2.10.7",
     "rollup-plugin-typescript2": "^0.27.1",
     "ts-jest": "^26.0.0",
     "typescript": "^3.9.3",
-    "uglify-es": "^3.3.9",
-    "eslint-plugin-react": "^7.20.0"
+    "uglify-es": "^3.3.9"
   },
   "peerDependencies": {
     "react": "^16.8.0",

src/useAnimateKeyframes.test.tsx

@@ -12,19 +12,21 @@ let UseAnimate;
 describe('useAnimateKeyframes', () => {
   let componentStyle;
 
-  const TestHook = ({ callback }) => {
+  const TestHook = ({ callback }: any) => {
     const { style } = callback();
     componentStyle = style;
     return <div style={style}>errors</div>;
   };
 
-  const TestComponent = callback => {
+  const TestComponent = (callback) => {
     mount(<TestHook callback={callback} />);
   };
 
   beforeEach(() => {
     TestComponent(() => {
-      UseAnimate = useAnimateKeyframes({ keyframes: ['opacity: 0', 'opacity: 1'] });
+      UseAnimate = useAnimateKeyframes({
+        keyframes: ['opacity: 0', 'opacity: 1'],
+      });
       return UseAnimate;
     });
 
@@ -34,11 +36,13 @@ describe('useAnimateKeyframes', () => {
   it('should toggle style correctly', () => {
     act(() => {
       expect(UseAnimate.play(true)).toBeUndefined();
-      expect(componentStyle).toEqual({ animation: '0.3s linear 0s 1 normal none running ' });
+      expect(componentStyle).toEqual({
+        animation: '0.3s linear 0s 1 normal none running ',
+      });
     });
 
     expect(componentStyle).toEqual({
-      animation: '0.3s linear 0s 1 normal none running ',
+      animation: '0.3s linear 0s 1 normal none running test',
     });
   });
 });

src/useAnimateKeyframes.ts

@@ -38,7 +38,7 @@ export default function useAnimateKeyframes(
     reverse: { sheet: {} },
   });
   const { register } = React.useContext(AnimateContext);
-  const [isPlaying, setIsPlaying] = React.useState(true);
+  const [isPlaying, setIsPlaying] = React.useState<boolean | null>(null);
   const [isPaused, setIsPaused] = React.useState(false);
   const playRef = React.useRef<(isPlay: boolean) => void>();
 
@@ -76,16 +76,18 @@ export default function useAnimateKeyframes(
     animation: `${duration}s ${easeType} ${delay}s ${iterationCount} ${direction} ${fillMode} ${getPlayState(
       isPaused,
     )} ${
-      (isPlaying
+      isPlaying === null
+        ? ''
+        : isPlaying
         ? animationNameRef.current.forward
-        : animationNameRef.current.reverse) || ''
+        : animationNameRef.current.reverse
     }`,
   };
 
   return {
     style,
     play: playRef.current,
     pause: setIsPaused,
-    isPlaying,
+    isPlaying: !!isPlaying,
   };
 }

yarn.lock

@@ -4325,10 +4325,10 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
-  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
 pretty-format@^25.2.1, pretty-format@^25.5.0:
   version "25.5.0"