react-use-outside-click
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

npm version npm version npm licence

Installation

yarn add react-use-outside-click

It's Easy

import { useOutsideClick } from 'react-use-outside-click'

useOutsideClick("my-excluded-css-class", () => {
  alert("OUTSIDE CLICKED")
})

Example

import React, {useState} from 'react';
import { useOutsideClick } from "react-use-outside-click";

const ExampleComponent = () => {
    const [popoverIsVisible, setPopoverIsVisible] = useState(false);

    useOutsideClick("my-popover", () => {
        setPopoverIsVisible(false);
    })

    const togglePopover = () => {
        setPopoverIsVisible(!popoverIsVisible);
    }

    return (
        <div>
            <button type="button" onClick={togglePopover}>Toggle Popover</button>
            <div className="my-popover">
                Popover is Here
            </div>
        </div>
    );
};

export default ExampleComponent;

Package Sidebar

Install

npm i react-use-outside-click

Weekly Downloads

10

Version

1.0.1

License

Apache-2.0

Unpacked Size

19.1 kB

Total Files

9

Last publish

Collaborators

  • uykalkan