In Module 1, you set up basic functionality for your hook, finishing with a few refactors. Now that you're at a clean base, start adding more advanced functionalities to your hook. The first will be designing a cascading letter functionality. For example, if you had the title "A Cool Title", you would see the following animation through letters in the document title:

This new cascading letter functionality will be distinctly different from the current title iteration functionality. To keep the hook's code clean, it makes sense to define a new enum to distinguish which animation you should run. Make a new enum called 

mkdir src/enums
touch src/enums/AnimationType.ts

For now, you only have two animation types, the looping title functionality, which you'll designate as 

, and the new functionality of cascading letters, which you'll designate as 

export enum AnimationType {
  LOOP = "LOOP",
  CASCADE = "CASCADE",
}

You will use string enums because they are more easily debuggable and understandable when logged than numeric enums. If you were to use a non-string enum without string labels, you would have a simple integer value only, starting at 0 and so on.

There is a lot of controversy about using 

s in TypeScript, though it's unclear why. However, enums are most definitely an official type in the TypeScript language after all, so they must have a purpose. In this case, an enum is a perfect option to reach for: you know you may add, remove, or change animation types later, and an 

 is a very good way to catalog all these animation types.

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

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

  // Sets the shouldIterateTitles value whenever page visibility is lost.
  // Handles removing the event listener in cleanup as well.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // Modifies the document.title of the page whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles, animationType)
};

 to your hook, as well as pass it to your 

export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean, animationType: AnimationType) => {

 you can actually do the implementation. Pull out the current function logic that is in 

const runLoopIterationLogic = () => {
  const nextIndex = titleIndex + 1;
  nextIndex === titles.length ? setTitleIndex(0) : setTitleIndex(nextIndex);
};

You can write your new iteration logic function for the cascading, 

---
title: Implementing a Cascading Letter Functionality
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-8
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/6JOSp5N02jXAjmgw4ea01dW8JPCyhoLx7pyHAmrUEoByw.m3u8
---

In Module 1, you set up basic functionality for your hook, finishing with a few refactors. Now that you're at a clean base, start adding more advanced functionalities to your hook. The first will be designing a cascading letter functionality. For example, if you had the title "A Cool Title", you would see the following animation through letters in the document title:

    A
    A Co
    A Cool
    A Cool T...

and so on!

## New `animationType` Parameter and Enum

This new cascading letter functionality will be distinctly different from the current title iteration functionality. To keep the hook's code clean, it makes sense to define a new enum to distinguish which animation you should run. Make a new enum called `animationType`. First, create a new folder under `src` called `enums`. Then create a new file called `AnimationType.ts`:

```shell
mkdir src/enums
touch src/enums/AnimationType.ts
```

For now, you only have two animation types, the looping title functionality, which you'll designate as `LOOP`, and the new functionality of cascading letters, which you'll designate as `CASCADE`:

```ts
export enum AnimationType {
  LOOP = "LOOP",
  CASCADE = "CASCADE",
}
```

You will use string enums because they are more easily debuggable and understandable when logged than numeric enums. If you were to use a non-string enum without string labels, you would have a simple integer value only, starting at 0 and so on.

There is a lot of controversy about using `enum`s in TypeScript, though it's unclear why. However, enums are most definitely an official type in the TypeScript language after all, so they must have a purpose. In this case, an enum is a perfect option to reach for: you know you may add, remove, or change animation types later, and an `enum` is a very good way to catalog all these animation types.

## Modifications to `usePleaseStay`

Now that you have your new `AnimationType` enum, you can add a new parameter `animationType`, type `AnimationType` to your `usePleaseStay` hook. Also, forward the `animationType` parameter to the `useTitleChangeEffect` hook:

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

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

  // Sets the shouldIterateTitles value whenever page visibility is lost.
  // Handles removing the event listener in cleanup as well.
  useListenToVisibilityChangeOnMount(setShouldIterateTitles);

  // Modifies the document.title of the page whenever shouldIterateTitles is true
  useTitleChangeEffect(titles, shouldIterateTitles, animationType)
};
```

## Modifications to `useTitleChangeEffect`

Add the `animationType` parameter, with type `AnimationType` to your hook, as well as pass it to your `useTitleChangeEffect`, and add it to the signature there:

```ts
export const useTitleChangeEffect = (titles: string[], shouldIterateTitles: boolean, animationType: AnimationType) => {
```

Now, in `useTitleChangeEffect` you can actually do the implementation. Pull out the current function logic that is in `useInterval` and make a new function called `runLoopIterationLogic`:

Chris Frewin

Implementing a Cascading Letter Functionality

In module one, we set up basic functionality for our hook, finishing with a few

refactors. Now that we're at a clean base, let's start adding more advanced

hook. The first will be designing a cascading letter functionality. For example

the title A cool title, we would see the following animation through the

So pursue and see the A, then AC, then ACO, and so on. So instead of iterating

it would iterate letter by letter. This new cascading letter functionality will

different than the current title iteration functionality. So to keep the hooks

it makes sense to define an enum to distinguish which animation we want to run.

Let's make a new enum called animation type. First, we'll make a new folder

src folder called enums. Within this folder, we'll create a new file called

So this will be export enum animation type. And for now, we only have two

the looping title functionality, which will designate as loop.

And the new functionality of cascading letters, which will designate as cascade

We will use string enums because they're more easily debugable and

logged out than numeric enums are. Now that we have our new animation type enum

parameter to use please stay. This new parameter will of course be animation

animation type. We'll also forward this animation type parameter onto the use

hook. Within use title change effect, let's add the new parameter we've

And before we use it right away, let's do some small refactors within this hook

extend it in the future. So the first thing I'm going to do is take the

and put that into a new function called run loop iteration logic.

So I'll pull this out and put it in here and we'll write our new iteration

And this will essentially be the same except that we won't take the entire

but just the first title. Now within the use interval function, we can leverage

So we'll do a switch on that animation type. And if the type is cascade, we of

call our run cascade iteration logic. And if the case is the animation type

we want to run our loop iteration logic. And now extremely important whenever

is to add the default case. And here since it was our original implementation,

the default case using JavaScript's fall through ability in switch statements

type is forgotten or somehow typoed, we'll always fall through to run the loop

Now we need to do the same for this second use effect here. So first, I'll take

logic and create a new function called run loop title logic.

And we'll also write the new logic for our cascade function. So this function

And again, it's fairly similar except we'll be using the first index of the

And to iterate through the given letters in that first title, we'll use the

So starting at the first position of whatever the first title is, and we'll go

the title index. And similarly to our use interval function switch case here,

within the use effect. And instead of the iteration logic functions, we want

Now, since the animation type enum is exposed as a type of a public parameter

exposed hook, we should also expose this type. So let's hop into index.ts and

animation type enum. And that's within the enums and animation type file.

That should be all there is to it for adding this new cascading functionality.

And move into the example project. And within app.tsx, let's first add the

of cascade. And since we know, due to our implementation, it'll only take the

do something fun, like I am a cascading title. We can save that and start up

npm start. And we can see as soon as we lose focus here, the cascade effect is

It should reach the end of the title, and then it will repeat. So we

cascading letter functionality to use, please stay. In summary, we created a

animation type. We added a new parameter called animation type of this new type

We passed this animation type onto use title change effect. And within use

effect, we made some small refactors, re encapsulating the iteration logics and

own function. And we leverage this enum type in a switch case of both the use

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