npm

Need private packages and team management tools?Check out npm Orgs. »

react-clickoutside-component

1.0.7 • 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

install

npm i react-clickoutside-component

Downloadsweekly downloads

51

version

1.0.7

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability