click_outside.tsx

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

export class ClickOutside extends React.Component<Props> {

    static defaultProps = {
        width: 100,
        height: 100,
    }

    static propertyControls: PropertyControls = {
        
    }

    state = {
        isSelected: false,
    }

    componentWillMount() {
        document.addEventListener('mousedown', this.handleClick, false);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClick, false);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isSelected: nextProps.isSelected});
    }

    handleClick = (e) => {
        if (this.node.contains(e.target)) {
            this.setState({isSelected: true);
            return;
        }

        this.setState({isSelected: false);
    }

    render() {
        return (
            <div ref={node => this.node = node}>
                {this.state.isSelected? "Yay! : "Click me!" }
            </div>
        );
    }
}

How does this work??

1. We set ref={node => this.node = node} on the element we want to target.
2. When the component mounts, we bind an event listener for mousedown
3. When the component unmounts, we remove that listener
4. That listener fires handleClick which checks where the click happens and if it's inside does one thing and if it's outside does another.

That's it! The componentWillReceiveProps method is there to turn a prop into a state but you don't need it if you don't want a user-facing controller.