TheLazy.Dev
Portfolio GitHub

Blog

tutorial |react |reacthook |javascript

Create Toast Component with React Hooks

nabillatrisnani

Nabilla Trisnani

Posted on December 31, 2022

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

💖 💪 🙅 🚩
nabillatrisnani
Nabilla Trisnani

Posted on December 31, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Create Toast Component with React Hooks
tutorial Create Toast Component with React Hooks

December 31, 2022