No Packages, Mate

    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

    Install

    npm i react-clickoutside-component

    DownloadsWeekly Downloads

    14

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    9.86 kB

    Total Files

    5

    Last publish

    Collaborators

    • avrmav