useTargetElement

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.

Source
#el-id
ref
div.class
id={`${id}-div`}
section

Usage

See API for more details.

Source

Click links below to view source on GitHub.

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.