react-eventlistener v0.0.1

WIP

react-eventlistener

A component that adds and removes event listeners.

usage

import EventListener from "react-eventlistener"

const MyComponent = () =>
  <EventListener
    eventName="keydown"
    callback={() => event.keyCode === 27 && event.preventDefault && console.log("esc pressed")}
  >
    <div>
      This component will log every time escape is pressed.
    </div>
  </EventListener>

can be used as self-closing tag

import EventListener from "react-eventlistener"

const MyComponent = () =>
  <div>
    This component will log every time escape is pressed.

    <EventListener
      eventName="keydown"
      callback={() => event.keyCode === 27 && event.preventDefault && console.log("esc pressed")}
    />
  </div>

write your own

import EventListener from "react-eventlistener"

const DocEscapeHandler = ({ callback, ...props }) =>
  <EventListener
    eventName="keydown"
    callback={() => event.keyCode === 27 && event.preventDefault && callback()}
    {...props}
  />

const MyComponent = () =>
  <DocEscapeHandler callback={() => console.log("esc pressed")}>
    <div>
      This component will log every time escape is pressed.
    </div>
  </DocEscapeHandler>