https://github.com/sebinsua/react-detect-event-outside

🎪🍃 `EventOutside` component for React.
https://github.com/sebinsua/react-detect-event-outside

blur click component event focus forms modals outside react

Last synced: about 3 hours ago
JSON representation

🎪🍃 `EventOutside` component for React.

• Host: GitHub
• URL: https://github.com/sebinsua/react-detect-event-outside
• Owner: sebinsua
• Created: 2017-09-13T16:51:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-24T22:54:12.000Z (over 7 years ago)
• Last Synced: 2024-10-30T03:28:13.049Z (3 months ago)
• Topics: blur, click, component, event, focus, forms, modals, outside, react
• Language: JavaScript
• Homepage:
• Size: 458 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# `react-detect-event-outside`

> `EventOutside` component for React.

A component which detects `click`, `focus` and `touch` events outside from it and calls a function to handle the event.

> **NOTE**: We capture events at the `document` level and wish to support some events which [do not bubble](https://en.wikipedia.org/wiki/DOM_events#Events), for example to detect when elements outside a component have gained `focus`. In these situations we: (a) use the [`useCapture` argument of `addEventListener`](https://stackoverflow.com/questions/7398290/unable-to-understand-usecapture-attribute-in-addeventlistener), or (b) find a similar event which does bubble ([sometimes difficult](https://bugzilla.mozilla.org/show_bug.cgi?id=687787)).

## Example

### Using the `EventOutside` component

```js

import React from 'react'

import EventOutside from 'react-detect-event-outside'

const onEvent = (evt, el) => console.log('event happened outside', evt, el)

const SomeComponent = () => (

  


    

      


        
Inside

        

      

    

    


      
Outside

      

    

  

)


export default SomeComponent

```

### Wrapping your own component with the `withEventOutside` HOC

> *NOTE*: This is useful if you wish to cause some state change within a component, since

> the `handleEventOutside` handler is defined within your component.

```js

import React, { Component } from 'react'

import { withEventOutside } from 'react-detect-event-outside'

class Handler extends Component {

  handleEventOutside = (evt, el) =>

    console.log('Handler: event happened outside', evt, el)

  render() {

    const { children } = this.props

    return 
{children}

  }

}


const WrappedHandler = withEventOutside()(Handler)

const SomeComponent = () => (

  


    

      
Inside

      

    

    


      
Outside

      

    

  

)


export default SomeComponent

```

## Install

```sh

yarn add react-detect-event-outside

```