So far you've been using the example application soley for your own internal testing.

But with a bit of effort, you can turn it into an interactive example page!

 recommends the following steps for adding Bootstrap to a 

import "bootstrap/dist/css/bootstrap.css";

Get started by creating markup for the example page in 

 class to wrap around the entire app, making the page responsive and nicer to look at all around:

You can start adding some information about 

<h1><pre>react-use-please-stay</pre></h1>
<h2>
  A React hook that animates the document title and/or favicon when focus from the page is lost.
</h2>

For each parameter than can be passed to 

, you should make a trackable state value for it, and then build a proper UI element for each. Start with the state variables, picking sensible defaults later on:

const [titles, setTitles] = useState<ArrayOfOneOrMore<string>>([
  "Newline!",
  "TypeScript!",
]);
const [intervalTime, setIntervalTime] = useState<number>(1000);
const [animationType, setAnimationType] = useState<AnimationType>(
  AnimationType.LOOP
);
const [faviconLinks, setfaviconLinks] = useState<Array<string>>([
  "https://d8dgeb1f3fxgw.cloudfront.net/static/img/icons/apple-touch-icon.png",
  "https://www.typescriptlang.org/favicon-32x32.png",
]);
const [shouldAlwaysPlay, setShouldAlwaysPlay] = useState<boolean>(true);

and below these state variables, you can call usePleaseStay:

usePleaseStay({
  titles,
  interval,
  animationType,
  faviconLinks,
  shouldAlwaysPlay,
});

Build an Interactive Form for Each Hook Field

For the titles, you can use a textarea and prompt to the user that they can comma separate each title. Due to the custom type 

, you need to use a bit of custom syntax by using the first title and then spreading the rest of the titles:

<div className="form-group">
  <label htmlFor="titles">
    <pre>title</pre>
  </label>
  <br />
  <small className="form-text text-muted">
    You can comma separate multiple titles
  </small>
  <textarea
    id="titles"
    className="form-control"
    value={titles}
    onChange={(event) => {
      const titles = event.target.value.split(",");
      setTitles(
        titles.length > 0
          ? [titles[0], ...titles.slice(1, titles.length)]
          : [""]
      );
    }}
  ></textarea>
</div>

For the interval, also add an input of type 

<div className="form-group">
  <label htmlFor="interval">
    <pre>interval</pre>
  </label>
  <input
    type="number"
    className="form-control"
    id="interval"
    placeholder="Enter interval"
    value={interval}
    onChange={(e) => setInterval(parseInt(e.target.value))}
  />
</div>

, use a radio button group, since only one type of 

<div className="form-group">
  <label htmlFor="animationType">
    <pre>animationType</pre>
  </label>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType1"
      value={AnimationType.LOOP}
      checked={animationType === AnimationType.LOOP}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType1">
      AnimationType.LOOP
    </label>
  </div>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType2"
      value={AnimationType.CASCADE}
      checked={animationType === AnimationType.CASCADE}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType2">
      AnimationType.CASCADE
    </label>
  </div>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType2"
      value={AnimationType.MARQUEE}
      checked={animationType === AnimationType.MARQUEE}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType2">
      AnimationType.MARQUEE
    </label>
  </div>
</div>

---
title: Prepare the Example App as a Public Example Page
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-18
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/dofXthI00kGt3gW00e21y1gg2pZQFVfljFDWHuU9frX58.m3u8
---

So far you've been using the example application soley for your own internal testing.

But with a bit of effort, you can turn it into an interactive example page!

## Add Bootstrap to the Example App

You'll use [Bootstrap](https://getbootstrap.com/) to style the example app. The [create-react-app documentation](https://create-react-app.dev/docs/adding-bootstrap/) recommends the following steps for adding Bootstrap to a `create-react-app`. First, install bootstrap:

```shell
npm install --save bootstrap
```

Then, in `src/index.ts`, you can `import` the bootstrap CSS file:

```js
import "bootstrap/dist/css/bootstrap.css";
```

## Add a Container to the Example App

Get started by creating markup for the example page in `App.tsx`. The idea is using Bootstrap's `container` class to wrap around the entire app, making the page responsive and nicer to look at all around:

```tsx
<div className="container">// ...</div>
```

## Add Header Markup

You can start adding some information about `usePleaseStay` itself within the container div:

```tsx
<h1><pre>react-use-please-stay</pre></h1>
<h2>
  A React hook that animates the document title and/or favicon when focus from the page is lost.
</h2>
```

## Add State Variables for all `usePleaseStay` parameters

For each parameter than can be passed to `usePleaseStay`, you should make a trackable state value for it, and then build a proper UI element for each. Start with the state variables, picking sensible defaults later on:

```tsx
const [titles, setTitles] = useState<ArrayOfOneOrMore<string>>([
  "Newline!",
  "TypeScript!",
]);
const [intervalTime, setIntervalTime] = useState<number>(1000);
const [animationType, setAnimationType] = useState<AnimationType>(
  AnimationType.LOOP
);
const [faviconLinks, setfaviconLinks] = useState<Array<string>>([
  "https://d8dgeb1f3fxgw.cloudfront.net/static/img/icons/apple-touch-icon.png",
  "https://www.typescriptlang.org/favicon-32x32.png",
]);
const [shouldAlwaysPlay, setShouldAlwaysPlay] = useState<boolean>(true);
```

and below these state variables, you can call usePleaseStay:

```tsx
usePleaseStay({
  titles,
  interval,
  animationType,
  faviconLinks,
  shouldAlwaysPlay,
});
```

## Build an Interactive Form for Each Hook Field

For the titles, you can use a textarea and prompt to the user that they can comma separate each title. Due to the custom type `ArrayOfOneOrMore`, you need to use a bit of custom syntax by using the first title and then spreading the rest of the titles:

```tsx
<div className="form-group">
  <label htmlFor="titles">
    <pre>title</pre>
  </label>
  <br />
  <small className="form-text text-muted">
    You can comma separate multiple titles
  </small>
  <textarea
    id="titles"
    className="form-control"
    value={titles}
    onChange={(event) => {
      const titles = event.target.value.split(",");
      setTitles(
        titles.length > 0
          ? [titles[0], ...titles.slice(1, titles.length)]
          : [""]
      );
    }}
  ></textarea>
</div>
```

For the interval, also add an input of type `number`:

```tsx
<div className="form-group">
  <label htmlFor="interval">
    <pre>interval</pre>
  </label>
  <input
    type="number"
    className="form-control"
    id="interval"
    placeholder="Enter interval"
    value={interval}
    onChange={(e) => setInterval(parseInt(e.target.value))}
  />
</div>
```

For the `animationType`, use a radio button group, since only one type of `animationType` can be selected at a time:

```tsx
<div className="form-group">
  <label htmlFor="animationType">
    <pre>animationType</pre>
  </label>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType1"
      value={AnimationType.LOOP}
      checked={animationType === AnimationType.LOOP}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType1">
      AnimationType.LOOP
    </label>
  </div>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType2"
      value={AnimationType.CASCADE}
      checked={animationType === AnimationType.CASCADE}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType2">
      AnimationType.CASCADE
    </label>
  </div>
  <div className="form-check">
    <input
      className="form-check-input"
      type="radio"
      name="animationType"
      id="animationType2"
      value={AnimationType.MARQUEE}
      checked={animationType === AnimationType.MARQUEE}
      onChange={(e) => setAnimationType(e.target.value as AnimationType)}
    />
    <label className="form-check-label" htmlFor="animationType2">
      AnimationType.MARQUEE
    </label>
  </div>
</div>
```

For the favicon links, also use a textarea, and just like the titles, let the user know that they should comma separate each. It's also nice to give the user some hints on example favicons they can use:

```tsx
<div className="form-group">
  <label htmlFor="faviconUrl">Favicon Links</label>
  <small id="faviconUrlHelp" className="form-text text-muted">
    You can comma separate multiple favicon links
  </small>
  <textarea
    id="faviconLinks"
    className="form-control"
    value={faviconLinks}
    onChange={(event) => {
      const faviconLinks = event.target.value.split(",");
      setFaviconLinks(
        faviconLinks.length > 1
          ? [
              faviconLinks[0],
              faviconLinks[1],
              ...faviconLinks.slice(2, faviconLinks.length),
            ]
          : ["", ""]
      );
    }}
  ></textarea>
  <p>Try some of these:</p>
  <p>
    Newline Favicon:
    https://d8dgeb1f3fxgw.cloudfront.net/static/img/icons/apple-touch-icon.png
  </p>
  <p>TypeScript Favicon: https://www.typescriptlang.org/favicon-32x32.png</p>
  <p>Redux Favicon: https://redux.js.org/img/favicon/favicon.ico</p>
  <p>Gatsby Favicon: https://www.gatsbyjs.com/favicon-32x32.png</p>
  <p>
    Electron Favicon:
    https://www.electronjs.org/images/favicon.b7a59262df48d6563400baf5671da548.ico
  </p>
</div>
```

Finally, for the `shouldAlwaysPlay`, use a checkbox, converting the actual state value of `shouldAlwaysPlay` to a string:

```tsx
<div className="form-group">
  <pre className="m-0 mt-4">shouldAlwaysPlay</pre>
  <div className="form-group form-check">
    <input
      type="checkbox"
      className="form-check-input"
      id="shouldAlwaysPlay"
      checked={shouldAlwaysPlay}
      onChange={(e) => setShouldAlwaysPlay(e.target.checked)}
    />
    <label className="form-check-label" htmlFor="shouldAlwaysPlay">
      <pre>{shouldAlwaysPlay.toString()}</pre>
    </label>
  </div>
</div>
```

So far, your `App.tsx` file should look like this:

```tsx
import React, { useState } from "react";
import { usePleaseStay, AnimationType } from "react-use-please-stay";
import { ArrayOfOneOrMore } from "../../dist/types/ArrayOfOneOrMore";

export default function App() {
  const [titles, setTitles] = useState<ArrayOfOneOrMore<string>>([
    "Newline!",
    "Redux!",
  ]);
  const [interval, setInterval] = useState<number>(1000);
  const [animationType, setAnimationType] = useState<AnimationType>(
    AnimationType.LOOP
  );
  const [faviconLinks, setFaviconLinks] = useState<Array<string>>([
    "https://redux.js.org/img/favicon/favicon.ico",
  ]);
  const [shouldAlwaysPlay, setShouldAlwaysPlay] = useState<boolean>(true);

  usePleaseStay({
    titles,
    interval,
    animationType,
    faviconLinks,
    shouldAlwaysPlay,
  });

  return (
    <div className="App">
      <h1>usePleaseStay</h1>
      <h2>
        A React hook that animates the document title and/or favicon when focus
        from the page is lost.
      </h2>
      <div className="form-group">
        <label htmlFor="title">Title</label>
        <small className="form-text text-muted">
          You can comma separate multiple titles
        </small>
        <div className="form-group">
          <textarea
            className="form-control"
            value={titles}
            onChange={(event) => {
              const titles = event.target.value.split(",");
              setTitles(
                titles.length > 0
                  ? [titles[0], ...titles.slice(1, titles.length)]
                  : [""]
              );
            }}
          ></textarea>
        </div>
      </div>
      <div className="form-group">
        <label htmlFor="interval">Interval</label>
        <input
          type="number"
          className="form-control"
          id="interval"
          placeholder="Enter interval"
          value={interval}
          onChange={(e) => setInterval(parseInt(e.target.value))}
        />
      </div>
      <div className="form-group">
        <label htmlFor="animationType">Animation Type</label>
        <div className="form-check">
          <input
            className="form-check-input"
            type="radio"
            name="animationType"
            id="animationType1"
            value="fade"
            checked={animationType === AnimationType.LOOP}
            onChange={(e) => setAnimationType(e.target.value as AnimationType)}
          />
          <label className="form-check-label" htmlFor="animationType1">
            Fade
          </label>
        </div>
        <div className="form-check">
          <input
            className="form-check-input"
            type="radio"
            name="animationType"
            id="animationType2"
            value="slide"
            checked={animationType === AnimationType.CASCADE}
            onChange={(e) => setAnimationType(e.target.value as AnimationType)}
          />
          <label className="form-check-label" htmlFor="animationType2">
            Slide
          </label>
        </div>
        <div className="form-check">
          <input
            className="form-check-input"
            type="radio"
            name="animationType"
            id="animationType2"
            value="slide"
            checked={animationType === AnimationType.MARQUEE}
            onChange={(e) => setAnimationType(e.target.value as AnimationType)}
          />
          <label className="form-check-label" htmlFor="animationType2">
            Slide
          </label>
        </div>
      </div>
      <div className="form-group">
        <label htmlFor="faviconUrl">Favicon Links</label>
        <small id="faviconUrlHelp" className="form-text text-muted">
          You can comma separate multiple favicon links
        </small>
        <textarea
          id="faviconLinks"
          className="form-control"
          value={faviconLinks}
          onChange={(event) => setFaviconLinks(event.target.value.split(","))}
        ></textarea>
        <p>Try some of these:</p>
        <p>
          Newline Favicon:
          https://d8dgeb1f3fxgw.cloudfront.net/static/img/icons/apple-touch-icon.png
        </p>
        <p>
          TypeScript Favicon: https://www.typescriptlang.org/favicon-32x32.png
        </p>
        <p>Redux Favicon: https://redux.js.org/img/favicon/favicon.ico</p>
        <p>Gatsby Favicon: https://www.gatsbyjs.com/favicon-32x32.png</p>
        <p>
          Electron Favicon:
          https://www.electronjs.org/images/favicon.b7a59262df48d6563400baf5671da548.ico
        </p>
      </div>
      <div className="form-group form-check">
        <input
          type="checkbox"
          className="form-check-input"
          id="shouldAlwaysPlay"
          checked={shouldAlwaysPlay}
          onChange={(e) => setShouldAlwaysPlay(e.target.checked)}
        />
        <label className="form-check-label" htmlFor="shouldAlwaysPlay">
          Should Always Run Animations
        </label>
      </div>
    </div>
  );
}
```

Chris Frewin

Prepare the Example App as a Public Example Page

So far we've been using the example application solely for our own internal

But with a bit of effort, we can turn it into an interactive example page.

We'll use Bootstrap to style the example app.

The Create React app documentation recommends the following steps for adding

Create React app. First, we install Bootstrap. Make sure that we're in the

Then in the index file, we can import the root Bootstrap CSS file.

In app.tsx, we'll get started creating markup for our example page.

So the first thing we'll do is wrap the entire content in a div with the class

And this is a Bootstrap class that makes the page responsive for any device

so that the content of our page will look nice no matter what device the site

And I've started up the app here so we can see what we're building as we go.

So the first thing I'll do here is add an h1 tag, and I'll also add a preform

And we'll just put the name of the package.

And in an h2 tag, we can copy the description, and I'm going to copy that from

Now for each parameter that we can pass to use, please stay, we'll make a track

for it. And then further on throughout this lesson, we'll build a proper UI

to update those values. So let's just start with the state values themselves

So I'll put them right up here at the top of app. And so we know we have the

And we can use the use state hook for this.

And we'll just provide some sensible defaults for each as we go.

So I'll just put new line and TypeScript as the titles.

We can take one second. We've got the animation type.

And we'll take the animation type loop as the default.

Which I'll paste in here so you don't have to watch me type it all out.

And we have our should always play and set should always play.

And we're going to set that to true. So the hook will be immediately running as

opens this documentation page. And now instead of leaving these hard coded

hook call, we will use the state values themselves.

And I'm going to modify this to just be interval. So it matches the name.

And favicon links is expecting this type, not a string array. So let's be sure

in the use state call. And we need to import that from our package.

Now let's get into building an interactive form for each of these fields, each

variables. So for the titles, we can use a text area and tell the user that

each title. So I'll create a form group div, which is the bootstrap class for a

And we'll add a label. This will be for title.

And we'll also use a pre tag to denote that this is an actual code based field

We'll do a line break. And we'll use the small tag with the class form text and

So it's a bit of a muted text color. And you can comma separate

The value is of course the titles themselves.

We've got our event. And the titles we want to set is the event that target

And set titles. We could try and pass the titles, but because of our array of

we have to do a bit of a fancy setter here. So we'll basically confirm to type

if the title stop length is greater than zero, then we can set those titles.

So at least the first value. And then if there are more, the rest of them using

And otherwise, we just pass an empty array with an empty string.

So that means our array of one or more type is satisfied.

So we can format that. So so far so good. And if I add something like

title number three, I should expect that to start showing up.

And it does. And we can go down the line here for each of our state variables,

adding an additional form group for each state variable.

So for the interval, we have an input of type number.

And we set the interval on the change of that input. That looks like this.

For the interval type, I've decided to go with a radio button group,

because you can only pick one type of animation at a time.

For the favicon links, I've also chosen to take a text area and also minded,

just as we did for the titles, the type criteria so that we need to check if

icon links is greater than one, then we set the state variable in this way.

So TypeScript is satisfied. So that looks like this. And I thought it was nice

some existing fav icons to help the user add additional fav icons to experiment

And finally, for should always play, I thought a check box would be a nice way

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