Event Props

Bootstrap components trigger events when they change. For instance a modal will trigger a "shown" or "hidden" event when it is shown or hidden.

This library maps these events (which fire on the actual dom elements) into props so you don't need to add event listeners on React refs yourself.

Example Usage

Let's say you have a modal, and the content of that modal needs to be fetched from a remote source. You've decided you want to wait until the user opens the modal to make the network request, so you can listen to the modals "show" event and make the request at that point.

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

function ExampleUsage() {
  const fetchData = useCallback(() => {
    // code to fetch data
  }, []);

  return <>
    <button data-bs-toggle="modal" data-bs-target="#example-usage">
      Launch
    </button>
    <Modal
      className="modal fade"
      id="example-usage"
      tabIndex="-1"
      aria-hidden="true"
      onShow={fetchData}
    >
      <div className="modal-dialog">
        <div className="modal-content">
          {/* display data here */}
        </div>
      </div>
    </Modal>
  </>;
}

Important! You'll notice the use of useCallback. Every time that an event prop is changed, the event listener needs to be removed and re-added to the underlying dom element. So, make sure the reference to your event handler only changes when you genuinely intend it to change. If you can, you could define your event handler outside the scope of the component to maintain a static reference and avoid using useCallback. It all depends on your use case.

Each Bootstrap component has different events, so be sure to check out the documentation of each element.