oncomplete handler (#3)

* oncomplete handler

* fix build

* remove unused var

* populate readme

* Update README.md

* Update README.md

* Update README.md

Author: JoviDeCroock

README.md

@@ -1,6 +1,61 @@
 # use-web-animation
 
+[![npm version](https://badgen.net/npm/v/use-web-animation)](https://www.npmjs.com/package/use-web-animation)
+[![Bundle size](https://badgen.net/bundlephobia/minzip/use-web-animation)](https://badgen.net/bundlephobia/minzip/use-web-animation)
+
+This project aims to provide an API to use the [web-animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
+
+## useWebAnimation
+
+This package exports 1 function called `useWebAnimation` which allows you to manipulate stylistic properties.
+
+```js
+import { useWebAnimation } from 'use-web-animation';
+
+const RotatingAnimation = () => {
+  const [ref] = useWebAnimation({
+    from: 0,
+    to: 180,
+    property: "transform",
+    infinite: true,
+    getValue: (x) => `rotate(${x}deg)`
+  });
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        backgroundColor: "red",
+        width: 100,
+        height: 100,
+        marginRight: 12
+      }}
+    />
+  );
+};
+```
+
+The second returned argument is a `play` function which can be used to imperatively
+start playing a paused animation. This function also accepts an `onComplete` callback
+which will be called when the animation completes.
+
+Accepted properties:
+
+```ts
+type AnimationOptions = {
+  duration?: number; // How long the animation should take
+  infinite?: boolean; // Should the animation keep looping?
+  pause?: boolean; // Start the animation out in a non-playing state
+  delay?: number; // Delay before starting to animate
+  easing?: string; // https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing
+  from: number; // The starting value
+  to: number; // The ending value
+  getValue: (x: number) => string; // Function used to inject the value for "from" and "to"
+  property: string; // The property name
+};
+```
+
 ## Examples
 
-https://codesandbox.io/s/zealous-rubin-fgdhk?file=/src/use-animation/index.ts
-https://codesandbox.io/s/charming-hermann-v4o2h?file=/src/useSpring.ts
+- https://codesandbox.io/s/zealous-rubin-fgdhk?file=/src/use-animation/index.ts
+- https://codesandbox.io/s/charming-hermann-v4o2h?file=/src/useSpring.ts

package.json

@@ -50,9 +50,9 @@
   },
   "scripts": {
     "build": "rimraf dist && yarn build:preact && yarn build:react",
-    "build:react": "microbundle --define process.env.NODE_ENV=production --external react --name use-web-animation --no-compress --output dist/",
-    "build:preact": "microbundle --define process.env.NODE_ENV=production --external preact --name use-web-animation --no-compress --output preact/dist --alias react=./preact/preact.ts",
-    "build:ci": "microbundle --define process.env.NODE_ENV=production --external preact --name use-web-animation --output dist/"
+    "build:react": "microbundle --external react --name use-web-animation --output dist/",
+    "build:preact": "microbundle --external preact --name use-web-animation --output preact/dist --alias react=./preact/preact.ts",
+    "build:ci": "microbundle --define process.env.NODE_ENV=production --external react --name use-web-animation --output dist/"
   },
   "prettier": {
     "singleQuote": true,
@@ -75,15 +75,15 @@
     }
   },
   "devDependencies": {
-    "@types/react": "16.9.16",
-    "@types/react-dom": "16.9.4",
-    "@typescript-eslint/eslint-plugin": "2.11.0",
-    "@typescript-eslint/parser": "2.11.0",
-    "eslint": "6.7.2",
-    "eslint-config-prettier": "6.7.0",
-    "eslint-plugin-react": "7.17.0",
-    "husky": "3.1.0",
-    "lint-staged": "9.5.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^4.28.4",
+    "@typescript-eslint/parser": "^4.28.4",
+    "eslint": "^7.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "^7.24.0",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.1.0",
     "microbundle": "^0.13.3",
     "preact": "^10.5.14",
     "prettier": "^2.3.2",

src/index.ts

@@ -1,7 +1,5 @@
 import { useRef, useLayoutEffect, useCallback, MutableRefObject } from "react";
 
-const DEFAULT_DURATION = 750;
-
 export type AnimationOptions = {
   duration?: number;
   infinite?: boolean;
@@ -30,53 +28,73 @@ export const useWebAnimation = ({
   const animation = useRef<Animation | undefined>();
   const reverse = useRef(false);
 
-  const animate = useCallback(() => {
-    const timingObject: KeyframeAnimationOptions = {
-      duration: duration || DEFAULT_DURATION,
-      iterations: 1,
-      delay: delay || 0,
-      easing,
-      direction: "normal"
-    };
-    reverse.current = false;
+  const animate = useCallback(
+    (onComplete?: (() => void)) => {
+      if (!ref.current || !ref.current.animate) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error('Please apply the ref to a dom-element.');
+        }
+        return;
+      }
 
-    callback.current = () => {
-      if (infinite) {
-        timingObject.direction = reverse.current ? "reverse" : "normal";
-        reverse.current = !reverse.current;
+      if (!ref.current.animate) {
+        ref.current!.style[property as any] = getValue(to);
+        return;
+      }
+
+      const timingObject: KeyframeAnimationOptions = {
+        duration: duration || 750,
+        iterations: 1,
+        delay,
+        easing,
+      };
+
+      callback.current = () => {
+        if (infinite) {
+          timingObject.direction = reverse.current ? "reverse" : "normal";
+          reverse.current = !reverse.current;
 
-        animation.current = ref.current!.animate(
-          [{ [property]: getValue(from) }, { [property]: getValue(to) }],
-          timingObject
-        );
-        animation.current.addEventListener("finish", callback.current);
-      } else {
-        if (animation.current) {
-          if (animation.current && callback.current) {
-            animation.current!.removeEventListener("finish", callback.current);
-          }
-          animation.current = undefined;
-          callback.current = undefined;
-        } else {
           animation.current = ref.current!.animate(
             [{ [property]: getValue(from) }, { [property]: getValue(to) }],
             timingObject
           );
           animation.current.addEventListener("finish", callback.current);
+        } else {
+          if (animation.current) {
+            ref.current!.style[property as any] = getValue(to);
+            if (onComplete) {
+              onComplete();
+            }
+            if (animation.current && callback.current) {
+              animation.current!.removeEventListener(
+                "finish",
+                callback.current
+              );
+            }
+            animation.current = undefined;
+            callback.current = undefined;
+          } else {
+            animation.current = ref.current!.animate(
+              [{ [property]: getValue(from) }, { [property]: getValue(to) }],
+              timingObject
+            );
+            animation.current.addEventListener("finish", callback.current);
+          }
         }
-      }
-    };
+      };
 
-    callback.current();
-  }, [delay, duration, easing, from, infinite, property, to]);
+      callback.current();
+    },
+    [delay, duration, easing, from, infinite, property, to]
+  );
 
   useLayoutEffect(() => {
     if (!pause) {
       animate();
     }
 
     return () => {
-      if (animation.current) {
+      if (animation.current && !pause) {
         if (animation.current && callback.current) {
           animation.current!.removeEventListener("finish", callback.current);
         }