Use react-toast-notifications to add toast notifications to a NextJS app

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

A Toast is a non modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. They are used for status messages and persist between page changes until they have been seen. We'll use the react-toast-notifications library to add this functionality to a basic app.

Kevin Cunningham: [0:00] We start with a Next application, the host TPHS, the home page, the about page, have a link between them. We use our packet installer to install the React Toast notifications module.

[0:16] In order to use the Toast provider that comes with the module, we need to create an _app.js file. We go to the Next documentation and find the Custom App page, and copy the content of this block into our _app. This exposes the My thing component which otherwise isn't available to us in Next.

[0:46] We'll import the { ToastProvider } from "react-toast-notifications" and run our mounting component with our provider. My application works just as before, but if I look up my React dev tools, you'll see there's a ToastProvider wrapping the IndexPage and the AboutPage.

[1:13] I'll go to my IndexPage, and I will import { useToasts } from react-toast-notifications. I'll then destructure the addToast function from useToasts( ). Next, I'll add a button. This button will have an onClick handler, which will use the addToast function. We pass a string for our message on an options object.

[1:50] The only essential prop for options object is appearance, and in this case, we want it to be success. Now, clicking on the success button will provide us with a toast and notification that says, "Success!" Back in our ToastProvider, we can set autoDismiss to true and set a autoDismissTimeout to a time in milliseconds.

[2:21] Now, our message will dismiss after two seconds, without us having to manually do that. In the provider, it's also possible to provide a placement for where you would like the notifications to appear, bottom-center, top-left, whichever makes sense for your UI. React notification library also provide three other styles -- warning, info, and the error.

[2:48] Each phase can be customized and with these four types, we can provide detailed information to your users.

egghead
egghead
~ 49 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today