React Bootstrap — Toasts

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add toasts with React Bootstrap.

Toast

Toasts are popup notifications that are displayed to show users some information.

We can add it with the Toast component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the Toast component that has various components.

Toast.Header has the header.

It has an image inside.

Toast.Body has the toast body.

This will always show since we have no code to close the modal.

Dismissible

We can make a toast dismissible by setting the show state to control when it shows.

The onClose prop lets us run code to dismiss the toast.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to let us close the toast with the close button on the top right.

We can disable animation with the animation prop set to false .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);
  const toggleShow = () => setShow(!show);

  return (
    <div className="App">
      <Toast show={show} onClose={toggleShow} animation={false}>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

Then we disable the animation when we open and close the toast.

Stacking

When we have multiple toasts, then they’re stacked on top of each other.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  return (
    <div className="App">
      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>

      <Toast>
        <Toast.Header>
          <img
            src="http://placekitten.com/49/49"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title 2</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Pellentesque tincidunt nisi quis nunc fringilla viverra.
        </Toast.Body>
      </Toast>
    </div>
  );
}

to show 2 toasts one on top of each other.

Autohide

We can add the delay prop to hide the toast after a given number of milliseconds.

We’ve to add this with the autohide property to make it hide automatically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Toast from "react-bootstrap/Toast";

export default function App() {
  const [show, setShow] = React.useState(true);

  return (
    <div className="App">
      <Toast show={show} onClose={() => setShow(false)} delay={3000} autohide>
        <Toast.Header>
          <img
            src="http://placekitten.com/50/50"
            className="rounded mr-2"
            alt=""
          />
          <strong className="mr-auto">Title</strong>
          <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Toast.Body>
      </Toast>
    </div>
  );
}

We have the delay prop to 3000 to close the toast after 3 seconds.

autohide lets us auto-hide the toast after the time is up.

Also, we’ve to add the close and onClose props to control the opening and closing of the toast.

Conclusion

We can add a toast easily with the Toast component.

It can contain any styles and we can change the placement.

Also, it can be auto-closed.