react-useoutside-handler

1.0.1 • Public • Published

react-useoutside-handler

This React hook allows you to detect clicks outside of a specified element.

Installation

Install using NPM:

npm install react-useoutside-handler --save

Install using Yarn:

yarn add react-useoutside-handler

Usage

Import:

import useOutside from 'react-useoutside-handler';

useOutside:

useOutside(ref, handler);

Example:

import React, { useRef } from 'react';
import useOutside from 'react-useoutside-handler';
 
const HelloWorldComponent = () => {
  const refHelloWorldElement = useRef(null);
 
  useOutside(refHelloWorldElement, () => alert('You clicked outside of Hello world element'));
 
  return (
    <div>
      <div ref={refHelloWorldElement} className="hello-world-element">Hello World</div>
    </div>
  );
};

Dependencies (0)

    Dev Dependencies (9)

    Package Sidebar

    Install

    npm i react-useoutside-handler

    Weekly Downloads

    16

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    3.69 kB

    Total Files

    4

    Last publish

    Collaborators

    • thisisclick