Skip to main content

useActiveElement

React Sensor Hooks that tracks document.activeElement

Usage​

Live Editor

function Demo() {
  const arr = [1, 2, 3, 4, 5, 6];

  const activeElement = useActiveElement<HTMLElement>();

  const key = useMemo(() => {
    return activeElement?.dataset?.id;
  }, [activeElement?.dataset?.id]);

  return (
    <div>
      <p>Select the inputs below to see the changes </p>
      <div style={{ display: "flex", gap: 15, flexWrap: "wrap" }}>
        {arr.map((i) => {
          return <input key={i} placeholder={`${i}`} data-id={i} />;
        })}
      </div>
      <br />
      <div>
        Current Active Element:
        <span> {activeElement?.tagName}</span>
      </div>
       <div>
        Current Active Element data-key:
        <span>{key}</span>
      </div>
    </div>
  );
};

render(<Demo/>)
Result
Loading...

API​

useActiveElement​

Returns​

T | null: Returns an instance of the type parameter T or null.

Arguments​