ConAntonakos/react-outside-click-handler

:blossom: react outside click handler

react-outside-click-handler

React Component for handling some specific component outside click

Table of contents

• Installation
• API
  • <OutsideClickHandler onOutsideClick useCapture />
• Example
• Development
• Credits

Installation

yarn add react-outside-click-handler

API

• <OutsideClickHandler onOutsideClick useCapture />

props

• onOutsideClick (Function): outside click handler
• useCapture (Boolean): See link's useCapture section (Default: true)

Example

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }

  handleOutsideClick() {
    // ...
  }

  render() {
    return (
      <div>
        <TodoList>
          <Todo />
          ...
        </TodoList>
        <OutsideClickHandler onOutsideClick={this.handleOutsideClick}>
          <InsideComponent />
        </OutsideClickHandler>
      </div>
    );
  }
}

Development

yarn start

Then, Go to http://localhost:3000

Credits

This component is inspired by airbnb/react-dates's OutsideClickHandler

Licence

MIT @ Taehwan, No (taehwanno)