bootstrap modal disable close on click outside react bootstrap

To disable the close behavior of a Bootstrap modal when clicking outside of it in React Bootstrap, you can use the backdrop and keyboard props. Set the backdrop prop to "static" to prevent closing the modal when clicking outside, and set the keyboard prop to false to prevent closing the modal when pressing the escape key.

Here's an example of how you can achieve this:

import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';

function MyModal() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <button onClick={handleShow}>Open Modal</button>

      <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Modal content goes here.
        </Modal.Body>
        <Modal.Footer>
          <button onClick={handleClose}>Close</button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default MyModal;

In this example, the backdrop="static" and keyboard={false} props are used in the Modal component to disable the close behavior when clicking outside or pressing the escape key.