DEV Community

Cover image for Create Toast Component with React Hooks
Nabilla Trisnani
Nabilla Trisnani

Posted on

Create Toast Component with React Hooks

#tutorial #react #reacthook #javascript

Hey Devs, for this tutorial we’re going to make a Toast component with React Hooks.

1. Create our Toast.js

In our Toast.js we have a button to trigger our toast and a toast. Inside our toast, we have a close button and a text inside the toast-header, and a random text and a button inside our toast-body.

import React from 'react';

export default function Toast() {
  return (
    <div>
      <button className="btn-toggle">Click Me!</button>
      <div className="toast-container">
        <div className="toast">
          <header className="toast-header">
            <h3>Toast Header</h3>
            <button className="btn-close">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 16 16"
              >
                <path
                  fill="white"
                  fillRule="evenodd"
                  d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8L3.72 4.78a.75.75 0 0 1 0-1.06z"
                />
              </svg>
            </button>
          </header>
          <div className="toast-body">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            </p>
            <button className="btn">Button</button>
          </div>
        </div>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Create our CSS

This is our basic CSS

.toast-container {
  padding: 12px;
  width: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.toast {
  background-color: #2f2f2f;
  border-radius: 4px;
  color: #ffffff;
  padding: 12px;
}
.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #868686;
  padding-bottom: 8px;
}
.toast-header h3 {
  font-size: 14px;
  font-weight: 600;
}
.btn-close {
  border: none;
  background-color: #4e4e4e;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.toast-body {
  padding-top: 8px;
}
.toast-body p {
  font-size: 12px;
  margin-bottom: 12px;
}
.toast-body .btn {
  border: 1px solid #0085ff;
  background-color: #0085ff;
  color: #ffffff;
  width: 100%;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
}

/* important part */
.hide {
  display: none;
}
.show {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

3. Create onClick handler

So the logic is when the btn-toggle is clicked it will set the state show to true and then it will add a class called show to our toast-container, and when the btn-toggle is clicked again, it will remove the class show but instead it will add a class called hide. The same thing also applied to our btn-close inside our toast header.

import React, { useState } from 'react';

export default function Toast() {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow((current) => !current);
  };

  return (
    <div>
      <button className="btn-toggle" onClick={handleShow}>
        Click Me!
      </button>
      <div className={`toast-container ${show === true ? 'show' : 'hide'}`}>
        <div className="toast">
          <header className="toast-header">
            <h3>Toast Header</h3>
            <button className="btn-close" onClick={handleShow}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 16 16"
              >
                <path
                  fill="white"
                  fillRule="evenodd"
                  d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8L3.72 4.78a.75.75 0 0 1 0-1.06z"
                />
              </svg>
            </button>
          </header>
          <div className="toast-body">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Explicabo esse maiores assumenda.
            </p>
            <button className="btn">Button</button>
          </div>
        </div>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Add timeout

To add a timeout, simply create a function called setTimeout that set our state show to false after a certain time. For this example, we set our timeout for 5 seconds (5s = 5000).

setTimeout(() => {
    setShow(false);
}, 5000);
Enter fullscreen mode Exit fullscreen mode

After that, we put our function into our if-else statement inside our toast-container.

The logic inside the if-else statement is if the show state is true, it will trigger the setTimeout function. And if the show state is false, then it will trigger the class hide.

{/* ... */}
<div className={`toast-container ${show === true ? setTimeout : 'hide'}`}>
{/* ... */}
Enter fullscreen mode Exit fullscreen mode

And there you have it, your custom React Hooks Toast. For more variations, you can check the repo here. And as always let me know in the comments if it helps or if I miss something.

Thanks for coming by and Peace ✌

Author

Top comments (0)

Read next

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -

hax profile image

TryHackMe API Wizard Breach Walkthrough

haXarubiX -

garciadiazjaime profile image

React + AWS Cognito: Email Authentication Setup Guide (First Part)

Jaime -