livstream-player/dist/hooks/useOutsideComponent.js

A lightweight livestream player SDK for React apps

import { useEffect } from 'react';
export const useOutsideComponent = (ref, onClickOutside) => {
    useEffect(() => {
        function handleClickOutside(event) {
            if (ref.current && !ref.current.contains(event.target)) {
                if (typeof onClickOutside === 'function') {
                    onClickOutside();
                }
            }
        }
        // Bind the event listener
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [ref, onClickOutside]);
};