@phawk/react-clickoutside-component

1.1.0 • Public • Published

react-clickoutside-component

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

npm version

forthebadge forthebadge

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

24-02-2016 Release version 1.0.3

  • First release

Contribute

Any pull-request is more than welcome 💥 😄

License

MIT

Package Sidebar

Install

npm i @phawk/react-clickoutside-component

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

9.83 kB

Total Files

5

Last publish

Collaborators

  • phawk