https://github.com/davidnguyen11/with-click-outside

The High Order Component which allows you to detect the current click is outside or inside of a component.
https://github.com/davidnguyen11/with-click-outside

Last synced: 3 months ago
JSON representation

The High Order Component which allows you to detect the current click is outside or inside of a component.

• Host: GitHub
• URL: https://github.com/davidnguyen11/with-click-outside
• Owner: davidnguyen11
• License: mit
• Created: 2018-05-06T09:34:46.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-07T07:28:48.000Z (about 7 years ago)
• Last Synced: 2025-02-08T15:34:05.526Z (5 months ago)
• Language: JavaScript
• Size: 160 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# withClickOutside

[![Build Status](https://travis-ci.org/davidnguyen179/with-click-outside.svg?branch=master)](https://travis-ci.org/davidnguyen179/with-click-outside) [![codecov](https://codecov.io/gh/davidnguyen179/with-click-outside/branch/master/graph/badge.svg)](https://codecov.io/gh/davidnguyen179/with-click-outside) [![npm version](https://badge.fury.io/js/with-click-outside.svg)](https://badge.fury.io/js/with-click-outside) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/davidnguyen179/with-click-outside/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

The High Order Component which allows you to detect the current click is outside or inside of a component.

![Chợ Tốt header](https://user-images.githubusercontent.com/6290720/39674408-a70eaa62-5175-11e8-9bd3-bb674f43f837.gif)

## Table Content

 - [Installation](https://github.com/davidnguyen179/with-click-outside#installation)

 - [Parameters](https://github.com/davidnguyen179/with-click-outside#parameters)

 - [Usage](https://github.com/davidnguyen179/with-click-outside#usage)

 - [Examples](https://github.com/davidnguyen179/with-click-outside#examples)

## Installation

**npm**

```bash

npm i with-click-outside

```

**yarn**

```bash

yarn add with-click-outside

```

## Parameters

**withClickOutside** retrieves 2 params.

### React Component

> `node`

### id

> `string`

## Usage

```js

import withClickOutside from 'with-click-outside';

import Component from './Component';

const WrappedComp = withClickOutside(Component, 'id_of_component');

```

You can check out the basic demo here: [https://codesandbox.io/s/yj9m75734j](https://codesandbox.io/s/yj9m75734j)

```js

import React from 'react';

import ReactDOM from 'react-dom';

import withClickOutside from 'with-click-outside';

class DropDown extends React.Component {

  constructor() {

    super();

    this.state = { open: false };

  }

  componentWillReceiveProps(nextProps) {

    if (nextProps.outside !== this.props.outside) {

      this.setState({

        open: !nextProps.outside,

      });

    }

  }

  toggle = () => {

    this.setState({ open: !this.state.open });

  };

  render() {

    const { open } = this.state;

    const { outside, id } = this.props;

    return (

      


        
{outside ? 'outside' : 'inside'}

        


          toggle

          {open &&

            !outside && (

              


                
item 1

                
item 2

                
item 3

              

            )}

        

      

    );

  }

}

const WrappedDropDown = withClickOutside(DropDown, 'idDropDown');

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

```


## Examples

- [DropDownList](https://github.com/davidnguyen179/with-click-outside/tree/master/examples/dropdownlist)