react-clickoutside-component
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • 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 react-clickoutside-component

Weekly Downloads

9

Version

1.1.2

License

MIT

Unpacked Size

9.86 kB

Total Files

5

Last publish

Collaborators

  • avrmav