Let's build a marquee effect now! You will have an array of letters, and you need to shift them from left to right in the browser tab. Just like the title looping and cascading letter functionality, you need to write both an iteration function and a title modification function within 

Maximum Amount of Characters Shown in a Browser Tab

In Chrome, the maximum number of letters that can fit onto a tab is 30. In Firefox, it is a bit longer, at about 35 characters. You'll take the shorter length and run your marquee offset in that range. First, store that number 30 as a constant in your project. Make a new folder under the 

mkdir src/constants
touch src/constants/Constants.ts

, create your iteration and loop logic functions. The iteration logic is fairly straightforward. Since you can only show 30 characters at maximum, you want your index to iterate from 0 to 30 over and over again. Open up 

const runMarqueeIterationLogic = () => {
  const nextIndex = titleIndex + 1;
  nextIndex === TAB_CHARACTER_COUNT
    ? setTitleIndex(0)
    : setTitleIndex(nextIndex);
};

import { TAB_CHARACTER_COUNT } from "../constants/Constants";

Next, create the title logic function, which you can call 

The tricky part about the marquee functionality is determining the letters to carry over when the text starts to get to the end of the tab. You need the number of letters that won't fit on the tab. You can find this by:

const carryOverCount =
  titleIndex + titles[0].length - TAB_CHARACTER_COUNT;

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

Let's build a marquee effect now! You will have an array of letters, and you need to shift them from left to right in the browser tab. Just like the title looping and cascading letter functionality, you need to write both an iteration function and a title modification function within `useTitleChangeEffect`.

## Maximum Amount of Characters Shown in a Browser Tab

In Chrome, the maximum number of letters that can fit onto a tab is 30. In Firefox, it is a bit longer, at about 35 characters. You'll take the shorter length and run your marquee offset in that range. First, store that number 30 as a constant in your project. Make a new folder under the `src/` folder called `constants/`, and a new file called `Constants.ts`:

```shell
mkdir src/constants
touch src/constants/Constants.ts
```

Add the following to it:

```ts
export const TAB_CHARACTER_COUNT = 30;
```

## Implementing the Marquee Iteration Logic

In `useTitleChangeEffect`, create your iteration and loop logic functions. The iteration logic is fairly straightforward. Since you can only show 30 characters at maximum, you want your index to iterate from 0 to 30 over and over again. Open up `useTitleChangeEffect.ts` and add the following:

```ts
const runMarqueeIterationLogic = () => {
  const nextIndex = titleIndex + 1;
  nextIndex === TAB_CHARACTER_COUNT
    ? setTitleIndex(0)
    : setTitleIndex(nextIndex);
};
```

Note that you'll have to import the `TAB_CHARACTER_COUNT` constant from `src/constants/Constants.ts`:

```ts
import { TAB_CHARACTER_COUNT } from "../constants/Constants";
```

## Title Modification Logic

Next, create the title logic function, which you can call `runMarqueeTitleLogic`:

```ts
const runMarqueeTitleLogic = () => {

}
```

The tricky part about the marquee functionality is determining the letters to carry over when the text starts to get to the end of the tab. You need the number of letters that won't fit on the tab. You can find this by:

```ts
const carryOverCount =
  titleIndex + titles[0].length - TAB_CHARACTER_COUNT;
```

And you do your special "carryover" logic if `carryOverCount` is greater than 0:

```ts
if (carryOverCount > 0) {
  const spaceText = "\u205f​​​".repeat(
    TAB_CHARACTER_COUNT - titles[0].length
  );
  document.title =
    titles[0].substring(titles[0].length - carryOverCount, titles[0].length) +
    spaceText +
    titles[0].substring(0, titles[0].length - carryOverCount);
} else {
  const offset = "\u205f​​​".repeat(titleIndex);
  document.title = offset + titles[0];
}
```

All together, your title modification logic function looks like this:

```ts
const runMarqueeTitleLogic = () => {
  const carryOverCount =
    titleIndex + titles[0].length - TAB_CHARACTER_COUNT;

  if (carryOverCount > 0) {
    const spaceText = "\u205f​​​".repeat(
      TAB_CHARACTER_COUNT - titles[0].length
    );
    document.title =
      titles[0].substring(titles[0].length - carryOverCount, titles[0].length) +
      spaceText +
      titles[0].substring(0, titles[0].length - carryOverCount);
  } else {
    const offset = "\u205f​​​".repeat(titleIndex);
    document.title = offset + titles[0];
  }
};
```

Chris Frewin

Implementing a Marquee Functionality

We will have an array of letters and we need to shift them from left to right

Just like the title looping and cascading letter functionalities,

we will need to write both an iteration function and a title modification

Now within Chrome, the maximum amount of letters that can fit onto a browser

And for Firefox, it's a bit longer, but it's pretty similar and just a little

We're going to take the shorter length for now to run our marquee as it'll also

So the first thing we'll do is define a new constants folder.

So we'll create that under SRC constants and a new TypeScript file called

And we'll create a const here tab character count, which will be 30.

In use title change effect, let's now write our iteration and title logic

I'm going to create a new function called run marquee iteration logic.

And the logic here is fairly straightforward, like the other functions, just

I'm going to save the next index as a const.

And in the case of a marquee, we want to check if we are at that tab character

count, which we just created in our constants file.

So if we are, we want to start back at the beginning.

Otherwise, we are free to move on to the next index.

We can then start to write our marquee title logic function.

And within run marquee title logic, we first need to check how many characters

And that's just the current title index, plus the total length of the title,

Now, if this is greater than zero, we need to do a bit more fancy calculation

So first, we'll have a space text, which separates the start and end of our

And that can be calculated by repeating the white space character.

And it's tab character count minus the title length.

And with that calculated, we can set the document title. So the document title

minus that carry over count all the way to the end of the title. So title, stop

And then the rest of the remaining title. So that's

substring again. But in this case, we're going from the beginning to what is

Now, if carry over count is not greater than zero, then all we need to do is

set the initial space in front of our title.

So we'll first store an offset value. Again, using this Unicode white space

And we just need to repeat that the title index number of times. So the total

offset is this current title index that we're offsetting by.

And we have that many whites based characters at the beginning of our string.

And so the title becomes this offset plus the title itself.

So we can clean that up. And we should be all set with the run marquee title

Now, before adding these two new functions into our switch cases, let's hop

into animation type and add this new animation type.

And back in use title change effect, let's add these new cases.

So when it's marquee or the iteration logic, we of course want to run the

And the same for the title logic. When our animation type is marquee.

We should be all set with our new marquee functionality. So let's rebuild our

And within app.tsx, let's do a new marquee title setup.

And if we open the browser and we lose focus, we of course see our offset

functionality doing its job. And as we get towards the end of the tab title.

So it looks like our marquee is working perfectly.

As a summary, we first created a run marquee iteration logic function.

And leverage this new animation type value in both of our switch cases within

And we rebuilt and tested our hook to make sure that everything was still

In the next lesson, we'll see how we can also do favicon changes using our hook

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