https://github.com/mununki/react-simple-click-outside

Simple click outside handler for React
https://github.com/mununki/react-simple-click-outside

Last synced: 3 months ago
JSON representation

Simple click outside handler for React

• Host: GitHub
• URL: https://github.com/mununki/react-simple-click-outside
• Owner: mununki
• License: mit
• Created: 2019-02-08T08:19:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-19T04:48:23.000Z (over 6 years ago)
• Last Synced: 2024-04-24T03:22:05.603Z (about 1 year ago)
• Language: JavaScript
• Size: 156 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-Simple-Click-Outside

### [Demo](https://mattdamon108.github.io/react-simple-click-outside/)

[![npm version](https://badge.fury.io/js/react-simple-click-outside.svg)](https://badge.fury.io/js/react-simple-click-outside)

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

```shell

$ npm i react-simple-click-outside

# or

$ yarn add react-simple-click-outside

```

### Example

```javascript

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 (

      <>

        

          


            Toggle

            {isOpen ? 
Hi~
 : null}

          

        

      >

    );

  }

}


ReactDOM.render(, document.getElementById("root"));

```

### Props

| Props  | Required | Type     | Default   | Descriptioin                                                                                                    |

| ------ | -------- | -------- | --------- | --------------------------------------------------------------------------------------------------------------- |

| close  | Yes      | function | undefined | The function to close the target component or element                                                           |

| target | No       | string   | undefined | The target(eg. `this.state.isOpen`) which the `close` function will work on. It will be args of close function. |