https://github.com/jmlavoier/react-use-clickout

It's a custom hook that handles an event after clicking outside of the component
https://github.com/jmlavoier/react-use-clickout

clickout clickoutside custom-hook hacktoberfest react react-hooks

Last synced: 3 months ago
JSON representation

It's a custom hook that handles an event after clicking outside of the component

• Host: GitHub
• URL: https://github.com/jmlavoier/react-use-clickout
• Owner: jmlavoier
• License: mit
• Created: 2019-11-18T20:57:31.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T15:02:07.000Z (over 3 years ago)
• Last Synced: 2025-12-26T09:35:07.941Z (6 months ago)
• Topics: clickout, clickoutside, custom-hook, hacktoberfest, react, react-hooks
• Language: JavaScript
• Homepage:
• Size: 199 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![icon](icon.png)

# react-use-clickout

[![Build Status](https://travis-ci.org/jmlavoier/react-use-clickout.svg?branch=master)](https://travis-ci.org/jmlavoier/react-use-clickout)

[![Coverage Status](https://coveralls.io/repos/github/jmlavoier/react-use-clickout/badge.svg?branch=master&service=github)](https://coveralls.io/github/jmlavoier/react-use-clickout?branch=master)

It's a custom hook that handles an event after clicking out of the component

> This library is deprecated in order to encourage you to use [useClickAway](https://github.com/streamich/react-use/blob/master/docs/useClickAway.md) from [react-use](https://github.com/streamich/react-use) library.

## Get started

Alright, let's go. First you should install the library

### Installing

Using **yarn**

```

yarn add react-use-clickout

```

Or **npm**

```

npm i react-use-clickout

```

*Prefer to install it derectly on your project, not globally*

### Using

```js

import React from 'react';

import useClickout from 'react-use-clickout';

function App() {

  const [

    ref, // it's to be assigned to the component reference

    bindHandler // it's a function to bind a callback handler

  ] = useClickout();

  

  /**

   * The function passed as a callback will be called 

   * if clicked out of the referenced component 

   */

  bindHandler(() => {

    console.log('clickout');

  });

  return (

    


      


        Referenced component 

      

      


        It's out of the referenced component

      

    

  );

}


export default App;

```

Changing **Events** is possible. You can pass an array with the events to be listened. The default are `mousedown` and `touchstart`.

```js

const [ref, bindClickout] = useClickout(['click']);

```

Although the name of this library is *clickout*, it isn't only about click event. 

### Pre requisites

It has the `react@^16.8.0` and `react-dom@^16.8.0` as peer-dependencies

## Contributing