react-examples/src/Projects/jsonDiffChecker/Toast.jsx at master · sujayalaspure/react-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { forwardRef, useImperativeHandle, useState } from "react"
import { ToastWrapper } from "./style"

const Toast = forwardRef((props, ref) => {
  const [isVisible, setIsVisible] = useState({
    showToast: false,
    message: "",
  })
  useImperativeHandle(ref, () => ({
    showToast: (message) => {
      setIsVisible({
        showToast: true,
        message,
      })
      const timeout = setTimeout(() => {
        setIsVisible({
          showToast: false,
          message: "",
        })
        clearTimeout(timeout)
      }, 3000)
    },
  }))

  return (
    <ToastWrapper showToast={isVisible.showToast}>
      <p>{isVisible.message}</p>
    </ToastWrapper>
  )
})

Toast.displayName = "Toast"

export default Toast