CODEWITHSUNDEEP
reactjsbootstrap-4bootstrap-5
Jova
Jova

Reputation: 105

Can I use regular bootstrap toast in reactjs?

I tried to understand how to use toast, but I couldn't and that's why I'm looking for help here. Is there a reason why to use react-bootstrap over regular bootstrap? I start to think that I cannot use all functionalities from regular bootstrap in react

Upvotes: 2

Views: 2263

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362390

It depends on which version of Bootstrap you're using. Bootstrap 5 no longer uses jQuery so Bootstrap components like the Toast can be used without the need for a 3rd party library like react-bootstrap or reactstrap.

First import the desired components...

import { Toast } from 'bootstrap';

Then, instantiate and use as needed...

const { Toast } = bootstrap;

var toastEl = document.getElementById('myToast');
const bsToast = new Toast(toastEl);
bsToast.show();

Bootstrap 5 Toast with React

Upvotes: 2

Luke Storry
Luke Storry

Reputation: 6702

You can use all the plain bootstrap utilities in React, but it is not reccomended.

This is because to enable interactive functionality, Bootstrap uses JQuery and other DOM-altering Javascript, which doesn't always play that well with React, which likes to "own" the DOM and any alterations.

If you check out the Usage section of the Bootstrap Toasts docs (here), you can see that it toasts need to be initialised with Jquery/JS:

Initialize toasts via JavaScript:

$('.toast').toast(option)

This can be messy to place within React, there are ways of calling it inside a useEffect() block but I've had trouble with similar things in the past.

This is why react-bootstrap is great, it can give you pre-made components with all this functionality baked in, which you can just drop into your codebase.

See the react-bootstrap docs for toasts here, fullly funcitonal toasts can be added with just:

<Toast>
  <Toast.Header>
     <strong className="mr-auto">Bootstrap</strong>
  </Toast.Header>
  <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>

Upvotes: 2

Related Questions