Component Prop

Each Bootstrap component has a bunch of useful methods attached to itself. For instance a modal object provides methods to "show" or "hide" itself. This library provides an easy way to gain access to the component object so that you can do as you please with it.

Example Usage

This modal will open automatically after 2 seconds.

import React, {useEffect, useRef} from "react";
import {Modal} from "bs5-react-elements";

function ExampleUsage() {
  const modal = useRef();

  useEffect(() => {
    const timeout = setTimeout(() => modal.current.show(), 2000);
    return () => clearTimeout(timeout);
  }, []);

  return <>
    <Modal
      className="modal fade"
      id="example-usage"
      tabIndex="-1"
      aria-hidden="true"
      component={modal}
    >
      <div className="modal-dialog">
        <div className="modal-content">
          Lorem ipsum dolor.
        </div>
      </div>
    </Modal>
  </>;
}

Always refer to the official Bootstrap documentation to find what methods are available for a component.