Modal
API reference for the Modal component
A focus-trapping container with a border and optional title. When rendered, Modal captures all focus and keyboard input. Press Escape to close. When the modal unmounts, focus returns to the previously focused component.
Render it conditionally — Modal takes over input the moment it mounts. Put any content inside: text, forms, lists, or other interactive components.
import { Modal } from 'giggles/ui';
import { useState } from 'react';
function App() {
const [showModal, setShowModal] = useState(false);
return (
<>
<MainContent />
{showModal && (
<Modal title="Confirm" onClose={() => setShowModal(false)}>
<Text>Are you sure?</Text>
</Modal>
)}
</>
);
}Modal captures all input while open. Register the keybinding that opens the modal on a scope that sits above the modal's children — unhandled keys bubble up naturally, so it will fire regardless of which child currently has focus.
API Reference
Modal
Prop
Type
Keybindings
| Key | Action |
|---|---|
Escape | Close the modal |
Examples
Modal with interactive content
{showModal && (
<Modal title="New File" onClose={() => setShowModal(false)}>
<TextInput label="Filename:" value={name} onChange={setName} onSubmit={createFile} />
</Modal>
)}