To be a top quality community hook, you should have a way to displaying warning messages to the developers using your hook. Like many frameworks do, it will only show messages in development mode. To determine if the environment is production or not, you'll check the fairly standard 

 environment variable for it's value. If 

 you'll display a warning message to the user. you'll also prefix the message with 

This message is shown in development only.

 to make it clear that the message is coming from the hook, and will only be shown in development scenarios.

Since this decision is slightly opinionated, since not all applications are built with a 

 environment variable, you'll make a note of this in the README. Do the following to the README:

## Warning Logs

This hook will display various warning messages if the `NODE_ENV` environment variable is set to `"development"`. These messages are a helpful reminder in development only, and will not be displayed in production.

 variable, so this logger will work as expected in the example application.

// simple util that issues a console.warn() in development mode, and is silent in all others
export const issueWarningMessage = (message: string) => {
  if (process.env.NODE_ENV === "development") {
    console.warn(
      `usePleaseStay: ${message} This message will be shown in development only.`
    );
  }
};

You'll have to install the node types to prevent TypeScript from complaining about the process.env variable:

With the logger written, you can use it to warn the user whenever the parameters passed aren't entirely correct. There are a few scenarios you should warn the user about, and you can collect all of these checks into a new function. Call it 

if (titles.length === 1 && titles[0] === "") {
  issueWarningMessage(
    "You have passed an empty string as the title. This will result in no text being displayed, regardless of AnimationType chosen."
  );
}
if (titles.length > 1 && animationType === AnimationType.CASCADE) {
  issueWarningMessage(
    'You have passed more than one title, but have specified "AnimationType.CASCADE". Only the first title in the titles array will be used.'
  );
}
if (titles.length > 1 && animationType === AnimationType.MARQUEE) {
  issueWarningMessage(
    'You have passed more than one title, but have specified "AnimationType.MARQUEE". Only the first title in the titles array will be used.'
  );
}

---
title: Adding a Development-only Warning Logger
code: https://gitlab.com/fullstackio/books/react-use-please-stay-with-react-and-typescript/-/blob/production/course/code/lesson-14
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/gEb8tvWuqFMje01HBmWDs9WrOn9L00xZniAtYyEpGxVIk.m3u8
---

To be a top quality community hook, you should have a way to displaying warning messages to the developers using your hook. Like many frameworks do, it will only show messages in development mode. To determine if the environment is production or not, you'll check the fairly standard `NODE_ENV` environment variable for it's value. If `NODE_ENV` is `development` you'll display a warning message to the user. you'll also prefix the message with `usePleaseStay` and suffix with `This message is shown in development only.` to make it clear that the message is coming from the hook, and will only be shown in development scenarios.

Since this decision is slightly opinionated, since not all applications are built with a `NODE_ENV` environment variable, you'll make a note of this in the README. Do the following to the README:

```md
## Warning Logs

This hook will display various warning messages if the `NODE_ENV` environment variable is set to `"development"`. These messages are a helpful reminder in development only, and will not be displayed in production.
```

`create-react-app` however _does_ make use of the `NODE_ENV` variable, so this logger will work as expected in the example application.

## Create the Function

Create the function until the `utils/` folder. you'll call it `issueWarningMessage`:

```shell
touch src/utils/issueWarningMessage.ts
```

Now add the following code to the file:

```ts
// simple util that issues a console.warn() in development mode, and is silent in all others
export const issueWarningMessage = (message: string) => {
  if (process.env.NODE_ENV === "development") {
    console.warn(
      `usePleaseStay: ${message} This message will be shown in development only.`
    );
  }
};
```

You'll have to install the node types to prevent TypeScript from complaining about the process.env variable:

```shell
npm i --save-dev @types/node
```

## Adding Warning Messages Around the Hook

With the logger written, you can use it to warn the user whenever the parameters passed aren't entirely correct. There are a few scenarios you should warn the user about, and you can collect all of these checks into a new function. Call it `validateParameters` and add it to the `utils/` folder:

```shell
touch src/utils/validateParameters.ts
```

Chris Frewin

Adding a Development-only Warning Logger

To be a top quality community hook, we should have a way to display warning

Like many frameworks do, we'll only show these messages in development mode.

To determine if the environment is development or not, we'll check the fairly

standard node-env environment variable for its value.

If node-env is development, we'll display a warning message to the user.

We'll also prefix our message with use-please-stay and suffix it with "this

message is shown in development only" to make it clear that the message is

coming from our hook, and will be shown only in development scenarios.

Since this decision is slightly opinionated, since not all applications are

built using a node-env environment variable, we'll make a note of this in the

And I'll just make a title here, "Warning Logs", and this hook will display

various warning messages if the node-env environment variable is set to "

These messages are a helpful reminder in development only, and will not be

Luckily for us in our example app, which is based off of Create React app,

Create React app does make use of the node-env variable, so we still have a

great way to test if our development only logger is working or not.

So let's first create a utility function, which I'm going to call issue-

learning message, and we can put that right in the utilities folder.

And for this function, we'll be passing in a message, which is a string, and as

is equal to development, then we're going to console.1.

So now let's add the message, and we said we would prefix this message to make

it clear that it's coming from use, please stay, and also a reminder that it's

We also noticed that TypeScript is complaining here, and that we should install

And with that installed, the error warning goes away, and now we can start

actually using our warning message utility function.

And so we know how we've designed the hook so far. There are a few edge case

scenarios that we can warn developers about.

We can collect all of these checks into a new function, which I'm going to call

So I'll put that also here in the utils folder.

And so far, all of our warnings will revolve around the titles array, which is

a type of array of one or more string, and also the animation type, which is of

One edge case we've already briefly discussed is that if the title's length is

only one, and that title is just an empty string, then we're going to use our

And we'll say, you have passed an empty string as the title.

This will result in no text being displayed, regardless of animation type

And we also know we have an edge case when the animation type is cascade or

We know from our implementation that we only take the first title in the titles

So I'm going to first check against the cascade case. So if titles dot length

is greater than one, and the animation type is animation type.

Then we'll again use our issue warning message function and say,

you have passed more than one title, but have specified.

Only the first title in the titles array will be used.

And we can copy this entire block, paste it in here and modify the cascade

animation type to the marquee animation type, also being sure to change what's

And we should be all set. And we can add this as the very first line in use,

So we'll call validate parameters and we'll forward on both the titles and the

Now let's test our logger. We can build the app, move into the example folder,

And what we'll do now is hop into app. And of course, we want a scenario which

would cause one of our warning messages to be shown.

So here we have two titles and I'll just pass the animation type of animation

And we expect we should see that warning message in the browser.

And indeed, we do see our warning message. You have passed more than one title,

but have specified animation type marquee.

Only the first title in the titles array will be used. And of course, this

message will be shown in development only.

So the warning message function we've built looks great. Makes a lot of sense.

And we see that it's logged twice here, but we'll discuss why that is in the

It has to do with how React runs in development mode. And to test that our

messages appear only in development mode.

Let's build a production build of our app. So we'll do npm run build.

We'll ensure that we have the latest version of serve installed with npm

And we'll serve our production app with serve -s build. And so now that we're

running in production, we of course do not see our warning messages.

So in summary, we created a function which issues a console warn message only

We utilize this function in another new function, which we called validate

parameters that validates some of the strange edge cases when certain values

And we called this validate parameters function as the first line within use

In the next lesson, we'll create yet another warning message to help prevent

developers from concurrently calling use please stay via a local storage

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