useActiveElement

Hook that returns the active element

elements

low

test coverage

Last changed: 1 minute 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 type UseActiveElementReturn<ActiveElement extends HTMLElement = HTMLElement> =
  ActiveElement | null;

export interface UseActiveElement {
  (): UseActiveElementReturn;

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

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

Source

Source • Demo

Contributors

D

debabin

B

babin