Modal

CSS dependencies

@import url("@uxf/ui/dialog/dialog.css");

Implementation ModalProvider

import {AppProps} from "next/app";
import {getModalRef, ModalProvider} from "@uxf/ui/modal";

function App(props: AppProps) {
    return (
        <UiContextProvider value={...}>
            {props.children}
            <ModalProvider ref={getModalRef()}/>
        </UiContextProvider>
    );
}

function Component(props: AppProps) {
    return (
        <div>
            <Button
                onClick={() =>
                    openModal({
                        children: (
                            <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
                        ),
                        onClose: () => console.log("modal closed"),
                    })
                }
            >
                Click to open modal - default
            </Button>
        </div>
    );
}

Implementation Modal

function Component(props: AppProps) {
    const [isOpen, setIsOpen] = useState(false);
    
    return (
        <div>
            <Button onClick={() => setIsOpen(true)}>Click to open modal</Button>
            <Modal close={() => setIsOpen(false)} isOpen={isOpen}>
                <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
            </Modal>
        </div>
    );
}