useTabObserver - HapplyUI

A React hook that observes active tab changes within a tab list using ResizeObserver and MutationObserver. Useful for animating tab indicators or tracking the active tab index.

Installation

bunx @happlyui/cli@latest add use-tab-observer

Usage

import { useTabObserver } from "@/hooks/use-tab-observer"

const { mounted, listRef } = useTabObserver({
  onActiveTabChange: (index, element) => {
    // Handle tab change
  },
})

API Reference

useTabObserver Options

Configuration options passed to the hook.

Prop	Type	Default	Description
`onActiveTabChange`	`(index: number, element: HTMLElement) => void`	-	Callback fired when the active tab changes. Receives the tab index and the DOM element.

useTabObserver Return Value

The object returned by the hook.

Prop	Type	Default	Description
`mounted`	`boolean`	-	Whether the observer has mounted and performed its initial check.
`listRef`	`React.RefObject<HTMLDivElement>`	-	Ref to attach to the tab list container element.