andreoav / click-outside-hook

A simple react hook to detect click or touch events outside an element.
MIT License
29 stars 1 forks source link
click-outside hooks react typescript

click-outside-hook

A simple react hook to detect click or touch events outside an element and execute a provided callback when this happens.

NPM CircleCI Greenkeeper badge module formats: cjs, and es

Install

yarn add click-outside-hook

Usage

import React from 'react';
import useClickOutside from 'click-outside-hook';

export default function SomeAwesomeComponent() {
  const ref = useClickOutside(() => console.log('my callback'));

  return (
    <div>
      <div ref={ref}>Awesome content</div>
    </div>
  );
}

When the user clicks or touches outside the Awesome content element, the callback is executed.

License

MIT © andreoav