Modal background

Last updated: 2.0.0 (22/01/2024)

This is a foundational component and is not designed to be used by itself. Only use this if you intend to make your own modals or overlays.

Usage

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

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

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            >
                Open modal
            </Button>
            
            <ModalBackground
                disclosure={disclosure}
            >
                // Modal content...
            </ModalBackground>
        </>
    )
}

Changing blur style

The backdropFilter prop can be used to change if and how the background is blurred.

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

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

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            >
                Open modal
            </Button>
            
            <ModalBackground
                disclosure={disclosure}
                backdropFilter="blur"     // Default
            >
                // Modal content...
            </ModalBackground>
        </>
    )
}

---

Props

Extends GenericOverlayBackgroundProps.

Property	Type	Description
disclosure	Disclosure	A disclosure to specify state information about the modal.