@react-hooks-hub/use-click-outside v0.0.2

@react-hooks-hub/use-click-outside

Installation

Use your preferred package manager to install @react-hooks-hub/use-click-outside:

npm install @react-hooks-hub/use-click-outside
# or
yarn add @react-hooks-hub/use-click-outside

Usage

Import and use the useClickOutside hook in your component:

import React, { useState, useRef } from 'react';
import { useClickOutside } from '@react-hooks-hub/use-click-outside';

function DropdownMenu() {
    const [isOpen, setIsOpen] = useState(false);
    const menuRef = useRef(null);

    useClickOutside([menuRef], (isOutside) => {
      setIsOpen(isOutside)
    });

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
            {isOpen && (
                <div ref={menuRef}>
                    {/* content */}
                </div>
            )}
        </div>
    );
}

export default DropdownMenu;