https://github.com/taneba/react-click-outsider

ClickOutside component with hooks
https://github.com/taneba/react-click-outsider

Last synced: 2 months ago
JSON representation

ClickOutside component with hooks

• Host: GitHub
• URL: https://github.com/taneba/react-click-outsider
• Owner: taneba
• License: mit
• Created: 2019-02-09T17:08:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T17:52:20.000Z (about 1 year ago)
• Last Synced: 2024-10-18T06:28:48.464Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-click-outsider

inspired by [tj/react-click-outside](https://github.com/tj/react-click-outside) but supported by TypeScript and React Hooks!

## install

```

yarn add 'react-click-outsider'

```

NOTE: Make sure your application is using react >= 16.8 

## API

### `ClickOutside`

Wrapp your component that you want to enhance with click outside detection:

```js

import ClickOutside from 'react-click-outsider'

import React, { setState } from 'react'

function App() {

  const [isOpen, setOpen] = useState(true)

  return (

     setOpen(false)}>

      
Something to close when clicking outside eg. modal, tooltip, etc.

    

  )

}

```


### `useClickOutside(ref: React.RefObject, function: (e: MouseEvent | TouchEvent) => void`

A custom hook dealing with clicks outside of arbitrary dom. `ClickOutside` uses this custom hook internally.

```js

import {useClickOutside} from 'react-click-outsider'

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

function App() {

  const container = useRef(null)

  const [isOpen, setOpen] = useState(true)

  useClickOutside(container, () => setOpen(false))

  return (

    
Something to close when clicking outside eg. modal, tooltip, etc.

  )

}

```


## License

[MIT License](https://github.com/taneba/react-click-outsider/blob/master/LICENCE)