Skip to main content

Modal Component

The <Modal> component provides a flexible way to create modal dialogs within your application. It supports customizable headers and provides imperative control through a ref.

Basic Usage​

The modal can be controlled imperatively using a ref.

import { useRef } from "react";
import { Div, Text, Button, Modal, ModalRef } from "react-better-html";

function App() {
   const myModalRef = useRef<ModalRef>(null);

   return (
      <Div>
         <Button
            text="Open Modal"
            onClick={() => {
               myModalRef.current?.open();
            }}
         />

         <Modal title="My Modal" ref={myModalRef}>
            <Text>Modal content here</Text>
         </Modal>
      </Div>
   );
}

Common Props​

  • maxWidth - the maximum width of the modal. Defaults to 30% smaller than app.contentMaxWidth from the <BetterHtmlContext> config.
  • title - this prop enables the header of the modal and renders a title for the modal.
  • titleColor - the color of the title text.
  • description - this prop requires text prop and renders a description text underneath it.
  • descriptionColor - the color of the description text.
  • headerBackgroundColor - the background color of the modal's header.
  • onOpen - a callback function that is called when the modal is opened.
  • onClose - a callback function that is called when the modal is closed.
  • children - the content of the modal.

Ref API​

The modal can be controlled using a ref with the following methods:

type ModalRef = {
   isOpened: boolean;
   open: () => void;
   close: () => void;
};
  • open() - opens the modal
  • close() - closes the modal
  • isOpened - a boolean indicating whether the modal is currently opened or not

Subcomponents​

A number of components in the library have a subcomponent feature witch is like a preset of the same component that is frequently used.

Modal.confirmation​

This component is a confirmation modal with Confirm and Cancel buttons.

import { useRef } from "react";
import { Div, Button, Modal, ModalRef } from "react-better-html";

function App() {
   const confirmationModalRef = useRef < ModalRef > null;

   return (
      <Div>
         <Button
            text="Continue"
            onClick={() => {
               confirmationModalRef.current?.open();
            }}
         />

         <Modal.confirmation
            onConfirm={() => {
               console.log("Confirmed!");
            }}
            ref={confirmationModalRef}
         />
      </Div>
   );
}

Modal.destructive​

This component is a destructive modal with Delete and Cancel buttons.

import { useRef } from "react";
import { Div, Button, Modal, ModalRef } from "react-better-html";

function App() {
   const deleteModalRef = useRef < ModalRef > null;

   return (
      <Div>
         <Button
            text="Delete"
            onClick={() => {
               deleteModalRef.current?.open();
            }}
         />

         <Modal.destructive
            onConfirm={() => {
               console.log("Deleted!");
            }}
            ref={deleteModalRef}
         />
      </Div>
   );
}

Used With Plugins​

The <Modal> component can be used with the react-router-dom plugin to set a query parameter when the modal is opened. This is especially useful when you want the path to changed when a modal is opened for analytics purposes. The only thing you need to do beside applying the plugin is to pass a name prop to the modal.