/
dedaMazai
/
reactGoodPattern
Обзор
Документация
Войти
/
dedaMazai
/
reactGoodPattern
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/shared/lib/hooks/useModal/useModal.tsx
64 строки
1 KB
Andrei Chipizubov
First commit
23 май 2023, 16:55
23 май 2023, 16:55
7f90536
Код
Авторство
О чём код?
import { MutableRefObject, useCallback, useEffect, useRef, useState, } from 'react'; interface UseModalProps { onClose?: () => void; isOpen?: boolean; animationDelay?: number; } export function useModal(props: UseModalProps) { const { onClose, isOpen, animationDelay, } = props; const [isClosing, setIsClosing] = useState(false); const [isMounted, setIsMounted] = useState(false); const timerRef = useRef() as MutableRefObject<ReturnType<typeof setTimeout>>; useEffect(() => { if (isOpen) { setIsMounted(true); } }, [isOpen]); const close = useCallback(() => { if (onClose) { setIsClosing(true); timerRef.current = setTimeout(() => { onClose(); setIsClosing(false); }, animationDelay); } }, [animationDelay, onClose]); const onKeyDown = useCallback((e: KeyboardEvent) => { if (e.key === 'Escape') { close(); } }, [close]); useEffect(() => { if (isOpen) { window.addEventListener('keydown', onKeyDown); } return () => { clearTimeout(timerRef.current); window.removeEventListener('keydown', onKeyDown); }; }, [isOpen, onKeyDown]); return { isClosing, isMounted, close, }; }