https://github.com/nixjs/reactjs-outside-click

A React hook for dealing with clicks outside
https://github.com/nixjs/reactjs-outside-click

Last synced: 3 days ago
JSON representation

A React hook for dealing with clicks outside

• Host: GitHub
• URL: https://github.com/nixjs/reactjs-outside-click
• Owner: nixjs
• Created: 2020-03-14T15:50:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-17T14:36:53.000Z (over 5 years ago)
• Last Synced: 2025-06-13T08:49:48.975Z (12 days ago)
• Language: JavaScript
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Handling function have to initial before `useOutsideClick` hook.

🌈 **Installation**:

-   **NPM**: `npm i reactjs-outside-click --save`

-   **YARN**: `yarn add reactjs-outside-click`

## Example

```

import React, { useRef, useState } from "react";

import useOutsideClick from 'reactjs-outside-click';

const HelloWorld = () => {

  const [ state, setstate ] = useState(false);

  const elementRef = useRef(null);

  const onOpenDiv = () => {

    setstate(prev => !prev);

  };

  useOutsideClick(elementRef, onOpenDiv);

  return (

    


      
Click outside to hide the element

      


        Click

        {state && demo}

      

    

  );

};


export default HelloWorld;

```