Manav Rathi 31cdb63c7d
S2
2024-11-04 14:19:48 +05:30

29 lines
859 B
TypeScript

import { useCallback, useState } from "react";
/**
* Common props that control the display of a modal (e.g. dialog, drawer)
* component.
*/
export interface ModalVisibilityProps {
/** If `true`, the component is shown. */
open: boolean;
/** Callback fired when the component requests to be closed. */
onClose: () => void;
}
/**
* A convenience hook for keeping the state for opening and closing a modal, and
* exposing a function to close the modal whose identity is stable.
*
* These props can be passed verbatim to our components that expect
* {@link ModalVisibilityProps}.
*/
export const useModalVisibility = () => {
const [open, setOpen] = useState(false);
const show = useCallback(() => setOpen(true), []);
const onClose = useCallback(() => setOpen(false), []);
return { show, props: { open, onClose } };
};