Components, JSX, and DOM API
Component contracts, JSX output, roots, refs, directives, focus, observers, and transitions from the root package.
Components, JSX, and DOM exports
35 public exports, grouped under their canonical import boundary.
@tavojs/core
Canonical import boundary for every symbol in this section.
autoFocus#
autoFocus<T extends HTMLElement = HTMLElement>(options?: FocusOptions | undefined): ElementDirective<T>Creates a directive that focuses the element after it is mounted.
Related guidecaptureFocusRestore#
captureFocusRestore(documentRef?: Document | undefined): () => voidCaptures current focus and returns a function that restores it later.
Related guideChild#
type Child = Primitive | VNode | Child[];Defines the child contract used by the application runtime.
Related guideClassName#
type ClassName = string | string[];Defines the class name contract used by the application runtime.
Related guideComponent#
type Component<P extends Record<string, unknown> = Record<string, unknown>> = (props: PropsWithChildren<P>) => Child;Defines the component contract used by the application runtime.
Related guidecreateDirective#
createDirective<T extends HTMLElement = HTMLElement>(directive: ElementDirective<T>): ElementDirective<T>Creates a reusable element directive from a function.
Related guidecreateListRefs#
createListRefs<K extends string | number, T extends Element = Element>(): { get(key: K): DomRefObject<T>; delete(key: K): boolean; clear(): void; entries(): IterableIterator<[K, DomRefObject<T>]>; }Creates a keyed collection of refs for dynamic lists.
Related guidecreateRef#
createRef<T extends Element = Element>(): DomRefObject<T>Creates a mutable DOM ref object for controller-owned element access.
Related guidecreateRoot#
createRoot(container: Element | DocumentFragment): RootCreates root for the application runtime.
Related guideDomRef#
type DomRef<T extends Element = Element> = DomRefObject<T> | DomRefCallback<T> | null | undefined;Public DOM ref value accepted by intrinsic JSX elements.
Related guideDomRefCallback#
type DomRefCallback<T extends Element = Element> = (node: T | null) => void;Callback ref shape for one-off DOM element access.
Related guideDomRefObject#
type DomRefObject<T extends Element = Element> = {
current: T | null;
};Object ref shape used by MVC controllers to keep direct DOM handles.
Related guideElementCleanup#
type ElementCleanup = () => void;Defines the element cleanup contract used by the application runtime.
Related guideElementDirective#
type ElementDirective<T extends HTMLElement = HTMLElement> = (element: T) => void | ElementCleanup;Defines the element directive contract used by the application runtime.
Related guideElementDirectiveInput#
type ElementDirectiveInput<T extends HTMLElement = HTMLElement> = ElementDirective<T> | Array<ElementDirective<T> | null | undefined | false> | null | undefined | false;Defines the element directive input contract used by the application runtime.
Related guideElementTarget#
type ElementTarget<T extends Element = Element> = T | DomRefObject<T>;Defines the element target contract used by the application runtime.
Related guidefocusFirst#
focusFirst(root: ParentNode, options?: FocusOptions | undefined): HTMLElement | nullFocuses the first focusable descendant inside a root node.
Related guidefocusFirstInvalid#
focusFirstInvalid(root: ParentNode, options?: FocusOptions | undefined): HTMLElement | nullFocuses the first invalid form control inside a root node.
Related guideFragment#
Fragment: typeof FragmentProvides fragment behavior for the application runtime.
Related guidegetFocusableElements#
getFocusableElements(root: ParentNode): HTMLElement[]Finds focusable descendants in DOM order.
Related guideh#
h(type: NodeType, props: (Record<string, unknown> & { children?: Child }) | null, ...children: Child[]): VNodeProvides h behavior for the application runtime.
Related guidemergeRefs#
mergeRefs<T extends Element>(...refs: DomRef<T>[]): DomRefCallback<T>Combines several refs into one callback ref.
Related guideobserveIntersection#
observeIntersection<T extends Element>(target: ElementTarget<T>, listener: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): UnsubscribeObserves element viewport intersection changes and returns an unsubscribe function.
Related guideobserveMutation#
observeMutation<T extends Node>(target: T | { current: T | null; }, listener: MutationCallback, options?: MutationObserverInit | undefined): UnsubscribeObserves DOM mutations and returns an unsubscribe function.
Related guideobserveResize#
observeResize<T extends Element>(target: ElementTarget<T>, listener: ResizeObserverCallback, options?: ResizeObserverOptions | undefined): UnsubscribeObserves element size changes and returns an unsubscribe function.
Related guidePropsWithChildren#
type PropsWithChildren<P extends Record<string, unknown> = Record<string, unknown>> = P & {
children?: Child;
};Defines the props with children contract used by the application runtime.
Related guiderender#
render(node: Child, container: Element | DocumentFragment): voidRenders for the application runtime.
Related guiderenderToString#
renderToString(node: Child): stringRenders to string for the application runtime.
Related guideRoot#
type Root = {
render(node: Child): void;
hydrate(node: Child): void;
unmount(): void;
};Defines the root contract used by the application runtime.
Related guidesetRef#
setRef<T extends Element>(ref: DomRef<T>, node: T | null): voidSets a ref to a DOM node or null. Useful when writing framework adapters.
Related guidetransition#
transition<T extends HTMLElement = HTMLElement>(options?: TransitionOptions<T> | undefined): ElementDirective<T>Creates a small class/callback transition directive for mounted elements.
Related guideTransitionClassNames#
type TransitionClassNames = {
enter?: string;
enterActive?: string;
leave?: string;
leaveActive?: string;
};Defines the transition class names contract used by the application runtime.
Related guideTransitionOptions#
type TransitionOptions<T extends HTMLElement = HTMLElement> = {
classes?: TransitionClassNames;
onEnter?: (element: T) => void;
onLeave?: (element: T) => void;
};Configures transition in the application runtime.
Related guidetrapFocus#
trapFocus(root: HTMLElement): () => voidKeeps Tab navigation inside a container until the returned cleanup runs.
Related guideVNode#
type VNode = {
type: NodeType;
props: {
children: Child[];
[key: string]: unknown;
};
};Defines the v node contract used by the application runtime.
Related guide