React High-Order Component to provide Click Outside Functionality
A high-order Component wrapper to provide click outside functionality to the wrapped components
###How to use
ClickOutside
componentClickOutside
onClickOutside
callback.###Example
import React from 'react';
import ReactDOM from 'react-dom';
import ClickOutside from 'react-clickoutside-component';
class App extends React.Component{
constructor()
{
super();
this.state = {
text: 'Click Somewhere'
}
}
handleClickOutside()
{
this.setState( { text : 'Clicked outsite '})
}
onClick()
{
this.setState( { text : 'Clicked inside '})
}
render(){
return (<ClickOutside onClickOutside={ ( e ) => this.handleClickOutside( e ) }>
<div onClick={ () => this.onClick() } id="demo" >{ this.state.text }</div>
</ClickOutside>);
}
}
ReactDOM.render( <App />, document.getElementById( 'app' ) );
###Options:
Name | Description |
---|---|
onClickOutside | function that is called when a click happened outside of the component |
###Changelog:
24-02-2016 Release version 1.0.4
24-02-2016 Release version 1.0.3
Any pull-request is more than welcome 💥 😄
MIT