React-clickoutside-component NPM

react-clickoutside-component

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

Demo

###How to use

Import ClickOutside component
Wrap your main component with the ClickOutside
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: