useFocusWithin

About

Handles focus events for the target component.

Examples

import { useState } from "react";
import { useFocusWithin } from "rooks";

const Page = () => {
  const [isFocusWithin, setIsFocusWithin] = useState<boolean>(false);
  const { focusWithinProps } = useFocusWithin<HTMLDivElement>({
    onFocusWithin: () => {
      console.log("focus within");
    },
    onBlurWithin: () => {
      console.log("blur within");
    },
    onFocusWithinChange: (isFocusWithin) => {
      setIsFocusWithin(isFocusWithin);
    },
  });

  return (
    <div
      {...focusWithinProps}
      style={{
        display: "inline-block",
        border: "1px solid gray",
        padding: 10,
        margin: "auto",
        background: isFocusWithin ? "goldenrod" : "gray",
        color: isFocusWithin ? "black" : "white",
      }}
    >
      <label style={{ display: "block" }}>
        First Name: <input />
      </label>
      <label style={{ display: "block" }}>
        Last Name: <input />
      </label>
    </div>
  );
};
export default Page;

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!