react-eventlistener

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>