react-use-focus-exit

The purpose of this library is to provide a way to handle when focus exits a specific container. Visit the demo site for some use cases.

I created this as a very lightweight alternative to react-onclickoutside, which seems to do a lot more than necessary and caused performance problems for me.

Install

yarn add -S react-use-focus-exit
# or
npm i -S react-use-focus-exit

Usage

FocusExit component

import React from 'react';
import { FocusExit } from "react-use-focus-exit";

export default function YourComponent({children, ...props}) {
  return (
    <FocusExit
      onFocusExit={focusIsWithin => {
        if(focusIsWithin) {
          // Do something if focus is still inside the container
        } else {
          // Do something if focus has left the container
        }
      }}
      elem="span"
      {...props}
    >{children}</FocusExit>
  )
}

Props

| prop | default | description | |---|---|---| | onFocusExit | function | callback that is executed at every blur event within the container and called with result of checking if focus is within the container (eg. focusIsWithin) | | elem | "div" | the wrapping element type; should always be a React element that renders an HTML node as event handlers are bound to this |

useFocusExit hook

useFocusExit gives you the ability to bind the onBlur handler manually. The only use case I can think of for using this instead of the FocusExit component is to compose any additional logic you might need to add with this library's onBlur.

import React, { useRef } from 'react';
import { useFocusExit } from 'react-use-focus-exit';

export default function YourComponent(props) {
  const containerRef = useRef()
  const onBlur = useFocusExit(containerRef, focusIsWithin => {
    if(focusIsWithin) {
      // Do something if focus is still inside the container
    } else {
      // Do something if focus has left the container
    }
  })
  return (
    <div ref={containerRef} onBlur={onBlur}>{/* more components */}</div>
  )
}

Note: React onBlur and onFocus events bubble up, which is non-standard behavior but intentional from the library. See issue#6410 for more info.

Params

| param | description | |---|---| | containerRef | a React ref to the container which you want watch for when focus has exited it | | callback | callback that is executed at every blur event within the container and called with result of checking if focus is within the container (eg. focusIsWithin) |