usefocuswithin

React Hook to detect if an element or its descendent element has focus. Similar to css :focus-within pseudo-class behaviour.

Currently, only change of focus with mouse 'click' event is processed. If focus is changed with Tab or any other means then the isFocusWithin will not update.

Live Demo

Installation

npm

npm install usefocuswithin

yarn

yarn add usefocuswithin

Usage

import React from "react";
import { usefocuswithin } from "usefocuswithin";

function App() {
  const targetRef = React.useRef(null);
  const isFocusWithin = usefocuswithin(targetRef);

  return (
    <div
      ref={targetRef}
      style={{ border: `1px solid ${isFocusWithin ? "green" : "red"}` }}
    >
      <input></input>
    </div>
  );
}

API

usefocuswithin(target, options?)

Arguments

| Argument | Type | Required? | Description | | -------- | ---------------------------------------------------- | --------- | -------------------------------------------------------------------- | | target | React.RefObject | T | null | Yes | A React ref created by useRef() or an HTML element | | options | Object | Yes | Configuration options for the hook. See Options below. |

Returns boolean

This hook returns true if the element in ref or any of its descendent element is focused, otherwise false.

Options

| Property | Type | Description | | -------- | ------- | ---------------------------------------------------------- | | mouse | boolean | Detects change of focus due to mouse click event. | | keyboard | boolean | Detects change of focus due to Tab keypress on keyboard. |