react-clickoutside-component

A high-order Component wrapper to provide click outside functionality to the wrapped components

Demo

How to use

1. Import ClickOutside component
2. Wrap your main component with the ClickOutside
3. Provide an 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

• Move React depedency to peerDepedencies

24-02-2016 Release version 1.0.3

• First release

Contribute

Any pull-request is more than welcome 💥 😄

License

MIT