React Bootstrap Dynamic Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

import { BasicModal, ConfirmationModal } from "react-bootstrap-dynamic-modal"; 

Basic Modal

Basic modal behaves similar to bootstrap modal

• Default it has the close button and modal body is scrollable.

Confirmation Modal

Modal would not hide until unless user take an action by clicking buttons. It would not hide by pressing ESC button and clicking outside of the modal.

• Does not have the close button and modal body is scrollable.

Example

function App() {
  const [modalFlag, setModalFlag] = useState(false);
  const [confirmationModalFlag, setConfirmationModalFlag] = useState(false);
  const [errorModalFlag, setErrorModalFlag] = useState(false);
  let basicModalProps = {
    title: "Basic Modal",
    size: 'lg',
    modalClass: 'modal-width',
    bodyClass:'modal-body-bg',
    headerClass:'modal-header-bg',
    isAnimate: false,
    buttons: [
      {
        variant: "secondary",
        handler: () => setModalFlag(false),
        label: "Cancel"
      },
      {
        variant: "primary",
        handler: () => setModalFlag(false),
        label: "Save"
      }
    ],
    onHide: () => setModalFlag(false)
  }

  let confirmationModalProps = {
    title: "Confirmation Modal",
    body: "Are you sure?",
    size: 'xs',
    isAnimate: false,
    isCenter: true,
    buttons: [
      {
        variant: "secondary",
        handler: () => setConfirmationModalFlag(false),
        label: "Cancel"
      },
      {
        variant: "primary",
        handler: () => setConfirmationModalFlag(false),
        label: "Yes"
      }
    ]
  }

  let errorModal = {
    title: "Session Time",
    body: "Your session timeout due to security",
    size: 'xs',
    isAnimate: false,
    isCenter: true,
    buttons: [
      {
        variant: "primary",
        handler: () => setErrorModalFlag(false),
        label: "Logout"
      }
    ],
  }

  return (
    <div className="App">
      <ButtonToolbar>
        <Button variant="primary" onClick={() => setModalFlag(true)}>Modal</Button>
        <Button variant="secondary" onClick={() => setConfirmationModalFlag(true)}>Confirmation Modal</Button>
        <Button variant="success" onClick={() => setErrorModalFlag(true)}>System Error</Button>
      </ButtonToolbar>
      {/* pass visibility flag to show/hide modal */}
      <BasicModal {...{ ...basicModalProps, "visibility": modalFlag }} />
      <ConfirmationModal {...{ ...confirmationModalProps, "visibility": confirmationModalFlag }} />
      <ConfirmationModal {...{ ...errorModal, "visibility": errorModalFlag }} />
    </div>
  );
}
export default App;

Output

Basic Modal

Confirmation Modal

Alert Modal

Modal Properties

| Name |Type |Default | Description | | ------------ | ------------ | ------------ | ------------ | | title | String, Number and HTML(DOM) String | | Displays title in the modal header | | body | String, Number and HTML(DOM) String | | Displays content in the modal body | |size | xl/lg/xs/sm/ | lg | Renders the size of the modal as xl/lg/xs/sm | | headerClass | String | | Customizable class to be applied on modal header | | bodyClass | String | | Customizable class to be applied on modal body | | modalClass | String | | Customizable class to be applied on modal | | isAnimate | Boolean | true | A Modal can also be animated. For that set the "animation" prop to false/true. | | isCenter | Boolean | false | A Modal can also be position Centered. For that set the "isCenter" prop to false/true. | | buttons | Array of objects | | Represents button in modal footer | | onHide | Function | | Fired(Triggered) when modal hides |