import React, { Component } from 'react'
import { ClickOutside } from 'click-outside-react'

export default class Demo extends Component {
    state = {
        isPopupVisible: false
    }

    showPopup = () => {
        this.setState({ isPopupVisible: true })
    }

    hidePopup = () => {
        this.setState({ isPopupVisible: false })
    }

    render() {
        const { isPopupVisible } = this.state

        return (
            <div>
                {isPopupVisible
                    ? <ClickOutside onClickOutside={this.hidePopup}>Popup Content</ClickOutside>
                    : null
                }
            </div>
        )
    }
}