Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

Packages

No packages published
You can’t perform that action at this time.