Skip to content

Declarative way to handle events outside / inside of React Component.

License

Notifications You must be signed in to change notification settings

fengweijp/react-event

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Event

Declarative way to handle events outside / inside of React Component.

Build Status

Example

import enhanceWithEvent from '@pinnacleio/react-event'

class HelloWorld extends Component {
  handleEvent() { /* Do whatever you want :) */ }
  render() { return <div /> }
}

// This component calls `handleEvent` method when `mousedown` is fired anywhere.
const Foo = enhanceWithEvent('mousedown')(HelloWorld)

// This component calls `handleEvent` method when `mousedown` is fired inside it.
const Bar = enhanceWithEvent('mousedown', { inside: true })(HelloWorld)

// This component calls `handleEvent` method when `mousedown` is fired outside of it.
const Baz = enhanceWithEvent('mousedown', { outside: true })(HelloWorld)

API

Our component must define method handleEvent() in order for enhancer to work, otherwise nothing will happen.

enhanceWithEvent(
  events: String | Array<String>, 
  options: Object,
): HigherOrderComponent
Parameter Description Example Default Value
events Event type(s) to listen for. 'mousedown', ['mousedown', 'touchstart'] Nil
options Where event will be accepted. { outside: true }, { inside: true } {}

About

Declarative way to handle events outside / inside of React Component.

Resources

License

Stars

Watchers

Forks

Packages

No packages published