hzdg / react-pressable

Add onRelease, onReleaseInside, onReleaseOutside, and onPress events to a component

react-pressable

react-pressable is a React component that provides the convenience events onRelease, onReleaseOutside, onReleaseInside, and onPress. It works with any component that supports the normal React mouse events.

Installation

browserify and webpack users can simply npm install react-pressable.

Bower users can bower install react-pressable.

You can also just download the react-pressable.js file from the standalone directory in the repository.

Usage

Composition is very easy:

var Pressable = require('react-pressable');

var MyComponent = React.createClass({
    render: function () {
        return (
            <Pressable
                    component={ React.DOM.div }
                    onReleaseOutside={ this.handleReleaseOutside }>
                <span>Hello</span>
            </Presssable>
        );
    },
    handleReleaseOutside: function () {
        alert('You pressed the component but released the button outside!')
    }
})

However, Pressable also lets you create a pressable version of an existing component using the from static method. This is often cleaner and avoids markup pollution:

var Pressable = require('react-pressable');
var PressableSpan = Pressable.from(React.DOM.span);

var MyComponent = React.createClass({
    render: function () {
        return (
            <PressableSpan onReleaseOutside={ this.handleReleaseOutside }>
                Hello
            </PresssableSpan>
        );
    },
    handleReleaseOutside: function () {
        alert('You pressed the component but released the button outside!')
    }
})

Event Types

Name	Description
onPress	Currently the same as onMouseDown.
onRelease	Invoked when the mouse button is released after pressing the component, regardless of where the cursor is.
onReleaseOutside	Invoked when the mouse button is released after pressing the component, if the cursor is outside of the component.
onReleaseInside	Invoked when the mouse button is released after pressing the component, if the cursor is inside the component.