CODEWITHSUNDEEP
reactjsbootstrap-5bootstrap-toast
Vijay
Vijay

Reputation: 95

How to show Bootstrap 5 Toast in React.js?

Following the below approach to show Bootstrap 5 Toast dynamically on click of a button in React.js

import statement:

import * as bootstrap from 'bootstrap';

Button click submit handler:

let toastEl = document.getElementById('myToast');
let toast = new bootstrap.Toast(toastEl, {autohide: false});
toast.show();

render:

<div class="toast align-items-center" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<button type="button" className="btn btn-primary" id="showToast" onClick={this.showToast}>Show Toast</button>

Is there any alternate method to do this in React way, as it is NOT recommended to use document.getElementById in React? Tried by using Ref, but Toast doesn't display.

Upvotes: 5

Views: 13933

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362320

You can use the useRef and useEffect React hooks...

const { useState, useEffect, useRef } = React
const { Toast } = bootstrap


function ToastDemo() {
    var [toast, setToast] = useState(false);
    const toastRef = useRef();

    useEffect(() => {
        var myToast = toastRef.current
        var bsToast = bootstrap.Toast.getInstance(myToast)
        
        if (!bsToast) {
            // initialize Toast
            bsToast = new Toast(myToast, {autohide: false})
            // hide after init
            bsToast.hide()
            setToast(false)
        }
        else {
            // toggle
            toast ? bsToast.show() : bsToast.hide()
        }
    })

    return (
    <div className="py-2">
        <button className="btn btn-success" onClick={() => setToast(toast => !toast)}>
            Toast {toast?'hide':'show'}
        </button>
        <div className="toast position-absolute m-4" role="alert" ref={toastRef}>
            <div className="toast-body">
              Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    )
}

Bootstrap 5 with React demos

Upvotes: 4

Related Questions