Alert Component as Toast

[ninoslat1]

Currently, i tried to develop some toast, but without add another package just for toast. First, we use useState and useEffect to playing with the visiblity and timing.

import React, { useState, useEffect } from "react";
import { Alert, AlertTitle, AlertDescription } from "../ui/alert";
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";

export const BadAlert = () => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => setVisible(false), 2000);
    return () => clearTimeout(timeout);
  }, []);

  return visible && (
    <Alert variant={"destructive"} className="w-1/4">
      <ExclamationTriangleIcon/>
      <AlertTitle>Data Not Found!</AlertTitle>
      <AlertDescription>Try to type the correct name</AlertDescription>
    </Alert>
  );
};

Next, in the main component's useEffect, we can use the toast with declaring the useState

const [isError, setIsError] = useState<boolean>(false)
const [data, setData] = useState<"Your data type here">([])
const [loading, setLoading] = useState<boolean>(false)

useEffect(() => {
  const fetchData = async () => {
    try {
      setIsError(false);
      setLoading(true);
      const response = await fetch(`api/user`);
      const responseData = await response.json();
      setData(responseData);
    } catch (error) {
      setIsError(true);
    } finally {
      setTimeout(() => setLoading(false), 2000);
    }
  };

  fetchData();
}, []);

• Note: Please match the timeout timing in the main component useEffect and alert component useEffect