CODEWITHSUNDEEP
reactjstypescripttoastreactstrap
Andres Aparicio
Andres Aparicio

Reputation: 27

Autohide Toast message using reactstratp library

I have tried everything and still my toast does not dissappear by itself here is the component

interface Props {
  setGlobalToast?: typeof setGlobalToast;
  toast?: ToastRequest;
}
/**
 * Displays toast notifications to user on any page of the site.
 */
const ToastGlobal: FunctionComponent<Props> = ({ setGlobalToast, toast }) => {
  return (
    <Toast className="GlobalToast" isOpen={!!toast} transition={{key:"1", transitionLeaveTimeout:3000}}>
      <ToastHeader icon={toast && toast!.type} toggle={() => setGlobalToast!(null)}>
        {toast && toast.heading}
      </ToastHeader>
      <ToastBody>{toast && toast.body}</ToastBody>
    </Toast>
  );
};

Upvotes: 1

Views: 1881

Answers (3)

Magum23
Magum23

Reputation: 33

useEffect(() => {
    if (toast) {
      setTimeout(() => toggle(), 3000)
    }
  }, [toast])

Just replace toggle function with your function to turn off the toast.

Upvotes: 1

jamfie
jamfie

Reputation: 151

function SampleToast(){
    const [visible, setVisible] =  useState(true)
    const handleClick = () => {
         setVisible(true)
         setTimeOut( () => setVisible(false), 1000)
    }
    return(
        <React.Fragment>
            <Button onClick = {() => handleClick()}> Show </Button>
            <Toast isOpen = {visible} transition = {{ in: visible, timeout: 150}}>
               Hello world
            </Toast>
        </React.Fragment>
    )
}

Upvotes: 0

ZealousWeb
ZealousWeb

Reputation: 1751

Try this

<Toast className="GlobalToast" show={!!toast} transition={{key:"1", transitionLeaveTimeout:3000}} onClose={()=>setGlobalToast(!toast)} delay={2000} autohide>
      <ToastHeader icon={toast && toast!.type}>
        {toast && toast.heading}
      </ToastHeader>
      <ToastBody>{toast && toast.body}</ToastBody>
</Toast>

Upvotes: 0

Related Questions