Create Toast Component with React Hooks
Tags: tutorial, react, reacthook, javascript
Published: 2022-12-31 07:37:23

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.

```javascript
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

```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.

```javascript
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).

```javascript
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`.

```javascript
{/* ... */}
<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](https://github.com/NabillaTrisnani/react-hooks-toast). 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](https://github.com/NabillaTrisnani)
- LinkendIn: [Nabilla Trisnani](https://www.linkedin.com/in/nabilla-trisnani/)
- Twitter: [@NabillaTrisnani](https://twitter.com/NabillaTrisnani)