Modal

Last updated: 3.0.0 (04/07/2024)

Usage

import { Modal, Button, useDisclosure } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure(false);

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            >
                Open modal
            </Button>
            
            <Modal
                disclosure={disclosure}
                title="My modal"
            >
                Hello there!
            </Modal>
        </>
    )
}

Advanced props

import { Modal, Button, useDisclosure } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure(false);

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            >
                Open modal
            </Button>
            
            <Modal
                disclosure={disclosure}
                title="My modal"
                
                closeOnOverlayClick={false}    // true by default
                closeOnEscape={false}          // true by default 
                lockScroll={false}             // true by default
            >
                Hello there!
            </Modal>
        </>
    )
}

Background props

import { Modal, Button, useDisclosure } from "@valence-ui/core";

function MyComponent() { 
    const disclosure = useDisclosure(false);

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            >
                Open modal
            </Button>
            
            <Modal
                disclosure={disclosure}
                title="My modal"
                
                overlayBackgroundProps={{
                    backgroundColor: "white",
                    backdropFilter: "dot-blur",
                }}
            >
                Hello there!
            </Modal>
        </>
    )
}

For more information about the accepted props, see Modal Background.

---

Props

Extends GenericOverlayProps.

Property	Type	Description
disclosure (required)	Disclosure	A disclosure to handle state information about this modal.
flexProps	FlexProps	Optional props to pass to the flex component.
innerFlexProps	FlexProps	Optional props to pass to the inner flex component.

---

Changelog

• 3.0.0: Added a 1px border to unify with sheets and help distinguish foreground from background.

• 2.2.0: Changed how internal scrolling works; added innerFlexProps.