https://github.com/jchang6513/use-click-outside-ref

React hook for listening click outside event of an element.
https://github.com/jchang6513/use-click-outside-ref

hooks outsideclick react typescript

Last synced: 3 months ago
JSON representation

React hook for listening click outside event of an element.

• Host: GitHub
• URL: https://github.com/jchang6513/use-click-outside-ref
• Owner: jchang6513
• License: mit
• Created: 2022-06-11T10:14:50.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-06-11T10:54:58.000Z (about 4 years ago)
• Last Synced: 2025-02-07T16:17:42.060Z (over 1 year ago)
• Topics: hooks, outsideclick, react, typescript
• Language: TypeScript
• Homepage:
• Size: 240 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-click-outside-ref

React hook to create a ref and listening click outside event of the ref.

## Usage

#### `useClickOutsideRef()`

```tsx

import React, { useState, useRef } from 'react'

import { useClickOutsideRef } from 'use-click-outside-ref'

export default () => {

  const [collapsed, setCollpased] = useState(false);

  const dropdownRef = useClickOutsideRef(() => setCollpased(false));

  return (

    


       setCollpased(!collapsed)}>Toggle

      {collapsed && 
}

    

  );

};

```


#### `useClickOutside()`

```tsx

import React, { useState, useRef } from 'react'

import { useClickOutside } from 'use-click-outside-ref'

export default () => {

  const [collapsed, setCollpased] = useState(false);

  const dropdownRef = useRef(null);

  useClickOutside(dropdownRef, () => setCollpased(false));

  return (

    


       setCollpased(!collapsed)}>Toggle

      {collapsed && 
}

    

  );

};

```

## API


### `useClickOutsideRef()`

return a ref and listen to the click outside event.

- `callback: function`

### `useClickOutside()`

listening click outside event of an element.

- `ref: element`

- `callback: function`