@remotion/player

Version:

React component for embedding a Remotion preview into your app

www.remotion.dev/docs/player

19 lines (18 loc) • 759 B

JavaScript

import { useEffect, useRef, useState } from 'react';
// hook to hide a popup/modal when clicked outside
export default function useComponentVisible(initialIsVisible) {
    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
    const ref = useRef(null);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                setIsComponentVisible(false);
            }
        };
        document.addEventListener('pointerup', handleClickOutside, true);
        return () => {
            document.removeEventListener('pointerup', handleClickOutside, true);
        };
    }, []);
    return { ref, isComponentVisible, setIsComponentVisible };
}