useActiveElement

Hook that returns the active element

elements

test coverage

Last changed: 2 days ago

Installation

Library

CLI

Manual

import { useActiveElement } from '@siberiacancode/reactuse';

Usage

const activeElement = useActiveElement(ref);
// or
const { ref, value } = useActiveElement();

Demo

source

Api

Parameters

Name	Type	Default	Note
target?	HookTarget	window	The target element to observe active element changes

Returns

ActiveElement | null

Returns

{ ref: StateRef<Element>; activeElement: ActiveElement | null }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseActiveElement {
  (): HTMLElement | null;

  <Target extends Element, ActiveElement extends HTMLElement = HTMLElement>(
    target?: never
  ): {
    ref: StateRef<Target>;
    value: ActiveElement | null;
  };

  <ActiveElement extends HTMLElement = HTMLElement>(target: HookTarget): ActiveElement | null;
}

Source

Source • Demo

Contributors

D

debabin

B

babin