Modal

<Modal />

Overview

A <Modal /> is used to present an actionable pop-up to the user.

Modals are great when we require the user to interact with a UI feature, but we don't want that feature to occupy space on out page by default. You can use the Modal to create a centered floating layer that pops up over the current page to get user feedback or display information.

The Modal does not track its own state of whether to show or hide itself.

Code example

import { useState } from 'react';
import { Modal } from '@threekit-tools/treble';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleClose = () => setShowModal(false);

  return (
    <Modal show={showModal} handleClose={handleClose}>
      <div>
        Content to be placed in the modal is added as an HTML child element.
      </div>
    </Modal>
  );
};

Props