@pikselpalette/react-on-event-outside

React OnEventOutside

This package lets you listen to events outside of a component.

An example use case is to allow a component to close when a user clicks elsewhere on the page.

Installation

npm i --save react-on-event-outside

Usage

OnEventOutside allows react components to interact with other components events.

Properties:

• on - An object where the keys are the event type (e.g. click, mousedown, keyup, etc.) and the values are your callbacks.

Example

For a more detailed example, check the example folder.

import React, { Component } from 'react';
import EventOutside from 'react-on-event-outside';

class Example extends Component {
  handleClickOutside = () => {
    console.log('clicked!');
  }

  render = () => {
    return (
      <EventOutside on={{
        click: () => {
          console.log('clicked outside the component');
        }
      }}>
        <div
          onClick={() => {
            console.log('clicked inside the component');
          }}
        >
          Click anything other than here to recieve a nice console log
        </div>
      </EventOutside>
    );
  }
}

export default Example;

We should now be able to click inside the component that provided the events, and see a console log appear.