Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mununki/react-simple-click-outside
Simple click outside handler for React
https://github.com/mununki/react-simple-click-outside
Last synced: 10 days 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 (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-19T04:48:23.000Z (almost 6 years ago)
- Last Synced: 2024-04-24T03:22:05.603Z (8 months 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. |