You may want the animation to play at all times, instead of only when the window is not in focus. Achieve this by adding a boolean parameter 

import { useState } from "react";
import { AnimationType } from "../enums/AnimationType";
import { useFaviconChangeEffect } from "./useFaviconChangeEffect";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";
import { useTitleChangeEffect } from "./useTitleChangeEffect";

export const usePleaseStay = (
  titles: string[],
  animationType: AnimationType,
  faviconLinks: string[],
  interval: number,
  shouldAlwaysPlay: boolean
) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // Sets the value of shouldIterateTitles whenever page visibility is lost.
  // Also handles the removal of the event listener during cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles, shouldAlwaysPlay);

  // Alters the document.title of the page when shouldIterateTitles is true.
  useTitleChangeEffect(titles, shouldIterateTitles, animationType, interval);

  // Alters the favicon of the page when shouldIterateTitles is true.
  useFaviconChangeEffect(faviconLinks, shouldIterateTitles, interval);
};

. However, if this value changes, add it to the dependency array. This approach avoids creating the 

import { useEffect } from "react";

export const useListenToVisibilityChangeOnMount = (
  setShouldIterateTitles: (shouldIterateTitles: boolean) => void,
  shouldAlwaysPlay: boolean
) => {
  // Event handler for visibilitychange.
  const handleVisibilityChange = () => {
    setShouldIterateTitles(document.visibilityState !== "visible");
  };

  // Adds the event listener on mount of this hook, and removes it on unmount.
  useEffect(() => {
    if (shouldAlwaysPlay) {
      setShouldIterateTitles(true);
      return;
    }
    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [shouldAlwaysPlay]);
};

---
title: Add Should Always Play as a Hook Parameter
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-12
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/OovUkc86rsDZ02AClZnkkC3T98izhbMq5SeT78xRJYGc.m3u8
---

You may want the animation to play at all times, instead of only when the window is not in focus. Achieve this by adding a boolean parameter `shouldAlwaysPlay` to the `useAnimation` hook, and forwarding it on to `useListenToVisibilityChangeOnMount`:

```ts
import { useState } from "react";
import { AnimationType } from "../enums/AnimationType";
import { useFaviconChangeEffect } from "./useFaviconChangeEffect";
import { useListenToVisibilityChangeOnMount } from "./useListenToVisibilityChangeOnMount";
import { useTitleChangeEffect } from "./useTitleChangeEffect";

export const usePleaseStay = (
  titles: string[],
  animationType: AnimationType,
  faviconLinks: string[],
  interval: number,
  shouldAlwaysPlay: boolean
) => {
  const [shouldIterateTitles, setShouldIterateTitles] = useState(false);

  // Sets the value of shouldIterateTitles whenever page visibility is lost.
  // Also handles the removal of the event listener during cleanup.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles, shouldAlwaysPlay);

  // Alters the document.title of the page when shouldIterateTitles is true.
  useTitleChangeEffect(titles, shouldIterateTitles, animationType, interval);

Chris Frewin

Add Should Always Play as a Hook Parameter

It may be the case that the user of our hook wants the animation to be playing

instead of only when the window is not in focus. This can be done by adding a

should always play to the use please stay hook. So we can add that here. Should

Boolean and I'm going to forward that on to the use listen to visibility change

And within use listen to visibility change on mount will also add this Boolean

and I'm going to hook that into the existing use effect.

And the only modification is here if should always play is true, then we're

iterate titles to true and return. We can save everything and rebuild our hook.

And moving into the example project within app.tsx, I'm going to pass true to

And if we start up the application, we can see that even though we are

and regardless of if we lose focus, we always see the three second interval

and fav icons that we've set up, which is exactly what we expect.

So in summary, we added a new parameter to the use please stay hook called

which is of type Boolean. We forwarded this parameter on to the use listen to

And we added it to the dependency array of the use effect hook here. And if it

we immediately call set should iterate titles to true and we return.

That's everything for module two. We've built all the features for the hook.

In module three, we will make some final optimizations and improvements to

experience and usage of our hook. And then we will publish our hook to mpm.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript