Create Toast Component with React Hooks

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>
  );
}

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;
}

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>
  );
}

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);

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'}`}>
{/* ... */}

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

• Github: @NabillaTrisnani
• LinkendIn: Nabilla Trisnani
• Twitter: @NabillaTrisnani