Skip to content

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

License

Notifications You must be signed in to change notification settings

hzdg/react-pressable

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published