Hook-driven modals

Hook-driven modals are used to display content in a layer above the main content. They can be used to display forms, confirmations, or other types of content.

The hook will provide a modal function that returns a promise. The promise will resolve with the value of the button clicked, or false if the modal is closed without a button click. It will also return a <ModalElement /> component that you need to render in your application.

Signature

Copy
import { useModal } from "tabler-react-2";

const { modal, ModalElement } = useModal({
  title: "Modal Title",
  text: "Text",
  buttons: []
});

<ModalElement />
<Button onClick={() => modal()}>Open hook-driven modal</Button>

Props

Tip: If you need to use multiple hook driven modals in a single scope or want to descriptively name the modal variables you can re-assign the variable names in the deconstruction:

Copy
const Home = () => {
  const { modal: signup, ModalElement: SignupPopup } = useModal({
    title: "Modal Title",
    text: "Text",
    buttons: [],
  });

  return (
    <>
      <Button onClick={() => signup()}>Open hook-driven modal</Button>
      {SignupPopup}
    </>
  );
};

Note: You don't need to use a <Button /> component to open the modal. The modal() function is in scope and can be called directly or any other way you would typically call a function.

Basic Usage

The useModal hook is used to display a modal.

For the basic usage, this shows the entire component, not just the implementation like usual. This is because of the extra implementation steps.

Copy
import { useModal, Button } from "tabler-react-2";

const Home = () => {
  const { modal, ModalElement } = useModal({
    title: "Modal Title",
    text: "Text",
  });

  return (
    <>
      <Button onClick={() => modal()}>Open hook-driven modal</Button>
      {ModalElement}
    </>
  );
};

export default Home;

Buttons

You can pass ButtonList to the buttons prop to display buttons in the modal footer. When the button is clicked, the modal will close and the promise returned by the modal function will resolve with the value of the clicked button.

Copy
const Home = () => {
  const {} = useModal({
    title: "Modal Title",
    text: "Text",
    buttons: [
      {
        text: "Button 1",
        variant: "danger",
        value: "one",
      },
      {
        text: "Button 2",
        variant: "success",
        value: "two",
      },
    ],
  });

  return (
    <>
      <Button onClick={async () => alert(await modal())}>
        Open hook-driven modal
      </Button>
      {ModalElement}
    </>
  );
};

ButtonList

The buttons prop of the useModal hook accepts an array of objects.

A button object has the following properties:

Copy
type ButtonList = Array<{
  text: string;
  variant?: string;
  value?: any;
}

Overriding modal setup

You can pass an object to the modal() function to override the default modal setup:

Copy
const Home = () => {
  const { modal, ModalElement } = useModal({
    title: "This will not show up",
    text: "Text",
    buttons: [],
  });

  return (
    <>
      <Button onClick={() => modal({ title: "This will though!" })}>
        Open hook-driven modal
      </Button>
      {ModalElement}
    </>
  );
};