Focus Modal
A modal component that spans the whole screen
Usage#
API Reference#
FocusModal#
This component is based on the Radix UI Dialog primitives.
Prop | Type | Default |
---|---|---|
defaultOpen | boolean | - |
open | boolean | - |
onOpenChange | function | - |
FocusModal.Trigger#
This component is used to create the trigger button that opens the modal. It accepts props from the Radix UI Dialog Trigger component.
FocusModal.Content#
This component wraps the content of the modal. It accepts props from the Radix UI Dialog Content component.
FocusModal.Header#
This component is used to wrap the header content of the modal.
This component is based on the div
element and supports all of its props
FocusModal.Body#
This component is used to wrap the body content of the modal.
This component is based on the div
element and supports all of its props
FocusModal.Footer#
This component is used to wrap the footer content of the modal.
This component is based on the div
element and supports all of its props
Example: Control Open State#
1import { useState } from "react"2 3const MyModal = () => {4 const [open, setOpen] = useState(false)5 6 return (7 <FocusModal 8 open={open} 9 onOpenChange={setOpen}10 >11 <FocusModal.Trigger>Trigger</FocusModal.Trigger>12 <FocusModal.Content>13 <FocusModal.Header>Title</FocusModal.Header>14 <FocusModal.Body>Content</FocusModal.Body>15 </FocusModal.Content>16 </FocusModal>17 )18}