Merge pull request #474 from wellyshen/play-state

refactor(types): enhance the types of `playState`

Author: wellyshen

README.md

@@ -552,12 +552,12 @@ const returnObj = useWebAnimations(options?: object);
 
 It's returned with the following properties.
 
-| Key            | Type     | Default | Description                                                                                                                                                                                                 |
-| -------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref`          | object   |         | Used to set the target element for animating.                                                                                                                                                               |
-| `playState`    | string   |         | Describes the playback state of an animation.                                                                                                                                                               |
-| `getAnimation` | function |         | Access the [animation instance](https://developer.mozilla.org/en-US/docs/Web/API/Animation) for [playback control](#playback-control), [animation's information](#getting-animations-information) and more. |
-| `animate`      | function |         | Imperatively [set/update the animation](#settingupdating-animation). Useful for [interactive animations and composite animations](#dynamic-interactions-with-animation).                                    |
+| Key            | Type                | Default | Description                                                                                                                                                                                                 |
+| -------------- | ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref`          | object              |         | Used to set the target element for animating.                                                                                                                                                               |
+| `playState`    | string \| undefined |         | Describes the [playback state](https://developer.mozilla.org/en-US/docs/Web/API/Animation/playState#value) of an animation.                                                                                 |
+| `getAnimation` | function            |         | Access the [animation instance](https://developer.mozilla.org/en-US/docs/Web/API/Animation) for [playback control](#playback-control), [animation's information](#getting-animations-information) and more. |
+| `animate`      | function            |         | Imperatively [set/update the animation](#settingupdating-animation). Useful for [interactive animations and composite animations](#dynamic-interactions-with-animation).                                    |
 
 ### Parameter
 

src/use-web-animations.d.ts

@@ -3,7 +3,7 @@ declare module "@wellyshen/use-web-animations" {
 
   export type Keyframes = Keyframe[] | PropertyIndexedKeyframes;
 
-  export type PlayState = string | null;
+  export type PlayState = AnimationPlayState | undefined;
 
   type BaseOptions = Partial<{
     id: string;

src/useWebAnimations.ts

@@ -8,7 +8,7 @@ export const eventErr = (type: string): string =>
   `💡 use-web-animations: the browser doesn't support ${type} event, please use "onUpdate" to monitor the animation's state instead. See https://github.com/wellyshen/use-web-animations#basic-usage`;
 
 type Keyframes = Keyframe[] | PropertyIndexedKeyframes;
-type PlayState = string | null;
+type PlayState = AnimationPlayState | undefined;
 type BaseOptions = Partial<{
   id: string;
   playbackRate: number;
@@ -52,7 +52,7 @@ const useWebAnimations = <T extends HTMLElement | null>({
   onUpdate,
   onFinish,
 }: Options<T> = {}): Return<T> => {
-  const [playState, setPlayState] = useState<PlayState>(null);
+  const [playState, setPlayState] = useState<PlayState>();
   const hasUnmountedRef = useRef(false);
   const animRef = useRef<Animation>();
   const prevPendingRef = useRef<boolean>();