1.0.5 • Published 6 years ago

react-simple-click-outside v1.0.5

Weekly downloads
140
License
MIT
Repository
github
Last release
6 years ago

React-Simple-Click-Outside

Demo

npm version

This is the tiny and simple click outside handler which enables your target component(or element) to listen click events outside of itself.

This module can help you to make such as drop-down menu, modal, popover, tooltip easily.

Features

  1. Listen click events of outside area.
  2. Typescript compatibility.

Install

$ npm i react-simple-click-outside

# or

$ yarn add react-simple-click-outside

Example

import React from "react";
import ReactDOM from "react-dom";
import ClickOutside from "react-simple-click-outside";

class Example extends React.Component {
  state = {
    isOpen: false
  };

  _toggle = () => {
    this.setState(prevState => {
      return { isOpen: !prevState.isOpen };
    });
  };

  _close = target => {
    this.setState({
      [target]: false
    });
  };

  render() {
    const { isOpen } = this.state;
    return (
      <>
        <ClickOutside close={this._close} target="isOpen">
          <div>
            <button onClick={this._toggle}>Toggle</button>
            {isOpen ? <div>Hi~</div> : null}
          </div>
        </ClickOutside>
      </>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

Props

PropsRequiredTypeDefaultDescriptioin
closeYesfunctionundefinedThe function to close the target component or element
targetNostringundefinedThe target(eg. this.state.isOpen) which the close function will work on. It will be args of close function.
1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago