index.mdx

category	features
Element	LowLevel

useTargetElement

import { HooksType } from '@/components'

<HooksType {...frontmatter} />

A React Hook that helps to get the target element via selector, ref, element and more, SSR-friendly.

Demo

Open DevTools to see the log.

import { App } from './demo'

Usage

See API for more details.

Source

import { Source } from '@/components'

API

export function useTargetElement<T extends GlobalTarget>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<T>
export function useTargetElement<T extends Element | null>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<T>
export function useTargetElement<T extends keyof HTMLElementTagNameMap>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<HTMLElementTagNameMap[T]>
export function useTargetElement<T extends keyof SVGElementTagNameMap>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<SVGElementTagNameMap[T]>
export function useTargetElement<A extends AtomBaseTarget, T extends ElementTarget<A> = ElementTarget<A>>(
  target: Getterable<T>,
  options?: UseTargetElementOptions,
): RefObject<A>
export function useTargetElement<
  R extends GlobalTarget | Element,
  T extends string | null | undefined | false | MutableRefObject<AtomBaseTarget | undefined> | R,
>(target: Getterable<T>, options?: UseTargetElementOptions): RefObject<R>

ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.