https://github.com/d-sanderson/use-is-clicked

https://github.com/d-sanderson/use-is-clicked

react-hook

Last synced: 23 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/d-sanderson/use-is-clicked
• Owner: d-sanderson
• License: mit
• Created: 2020-10-18T20:28:22.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-19T00:10:39.000Z (about 4 years ago)
• Last Synced: 2024-04-25T04:44:50.290Z (8 months ago)
• Topics: react-hook
• Language: JavaScript
• Homepage: http://use-is-clicked-demo.surge.sh
• Size: 5.86 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-is-clicked

🎯 a simple React hook that tracks whether a DOM element or its descendant is clicked. This is useful for tracking a modal/dropdown state and enabling it to close if clicked away.

To install:

- `npm i use-is-clicked`

  

or

- `yarn add use-is-clicked`

To use:

- create a ref using the `useRef()` hook

- add the ref to the target element using the `ref` attribute.

- pass the ref to the `useIsClicked` hook.

  

```js/** @jsx jsx */

import React, { useRef } from "react";

import { useIsClicked } from "use-is-clicked";

import { Navbar } from "react-bootstrap";

const Example = () => {

  const navRef = useRef();

  const isClicked = useIsClicked(navRef);

  return (

 

...

 

  )

}

export default Example

```

The hook returns a boolean which tracks whether the element(or one of its descendants) has been clicked on or away from.