react-ref-click-outside

This library is a very easy way to add handlers to an Click Outside event

Installation:

To install all dependencies run:

npm i --save react-ref-click-outside

Typescript

This package support Typescript

How to use

import React, { FunctionComponent } from 'react';

import { ClickOutsideProvider, ClickOutsideType } from 'react-ref-click-outside';

type Props = {
  onClickOutside: ClickOutsideType;
};

const App: FunctionComponent<Props> = ({ onClickOutside }) => {
  return (
    <div>
      <div
        className="my-awesome-container"
        ref={node => onClickOutside(node as HTMLElement, () => alert('work'))}
      >
        Click outside the container
      </div>
    </div>
  );
};

export default ClickOutsideProvider(App);