Nitrogenous Polymorphic Molecule

    @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

    Install

    npm i @phawk/react-clickoutside-component

    DownloadsWeekly Downloads

    4

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    9.83 kB

    Total Files

    5

    Last publish

    Collaborators

    • phawk