@pikselpalette/react-on-event-outside

    1.1.0 • Public • Published

    React OnEventOutside

    License npm version Build Status Codacy Badge devDependencies Status peerDependencies Status codecov Mutation testing badge

    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.

    Keywords

    none

    Install

    npm i @pikselpalette/react-on-event-outside

    DownloadsWeekly Downloads

    6

    Version

    1.1.0

    License

    Apache-2.0

    Unpacked Size

    291 kB

    Total Files

    22

    Last publish

    Collaborators

    • rubencarrenopiksel
    • salvador.rosa-rosado
    • pablorodriguezpiksel
    • horacio.ayestaran
    • krisb