react-use-hook-modal
Version:
A React Hook library for declaratively managing modals, eliminating the need for state declarations. Props can be passed directly through function calls, simplifying modal control in your application.
43 lines (42 loc) • 2.15 kB
TypeScript
import React from 'react';
import type { ModalState } from '../types/modal';
interface ModalProviderProps {
/**
* The children elements that will be rendered inside the modal provider.
* Typically, this would be the rest of your app that interacts with the modals.
*/
children: React.ReactNode;
/**
* Optional custom container component for rendering the modals.
* Defaults to `React.Fragment`. This prop allows users to define a custom container
* where animations can be applied. For example, libraries like React Transition Group
* can be integrated to handle modal animations. Users can set their own container
* to manage the way modals are rendered and animated.
*/
container?: React.ComponentType<any>;
/**
* The time in milliseconds before a modal is fully removed from the internal state
* after closing. This allows any exit animations from CSS frameworks (like MUI, Bootstrap, or Chakra UI)
* to complete before the modal is removed.
* Defaults to 3000 milliseconds (3 seconds).
*/
clearTime?: number;
/**
* A callback function that is triggered immediately after any modal is opened.
* This callback applies globally to all modals within the provider. It provides the
* currently opened modal's state as a parameter, allowing for specific actions like
* setting focus or starting animations based on the opened modal.
* @param modal - The state of the modal that was just opened.
*/
onAfterOpen?: (modal: ModalState) => void;
/**
* A callback function that is triggered immediately after any modal is closed.
* This callback applies globally to all modals within the provider. It provides the
* closed modal's state as a parameter, which can be useful for cleanup tasks or
* resetting modal-specific state.
* @param modal - The state of the modal that was just closed.
*/
onAfterClose?: (modal: ModalState) => void;
}
export default function ModalProvider({ children, container, clearTime, onAfterOpen, onAfterClose, }: ModalProviderProps): React.JSX.Element;
export {};