or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mddisclosure-components.mdfeedback-components.mdform-components.mdhooks.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdspecialized-components.mdstyling-system.mdtheme-system.mdtypes.mdtypography-components.md
tile.json

hooks.mddocs/

Hooks

React hooks for managing state, effects, and component behavior in Chakra UI applications.

Capabilities

Custom Hooks

useBreakpoint and useBreakpointValue

Get current breakpoint and responsive values.

import { useBreakpoint, useBreakpointValue } from "@chakra-ui/react";

interface UseBreakpointOptions {
  ssr?: boolean;
  fallback?: string;
}

function useBreakpoint(options?: UseBreakpointOptions): string | undefined;

type UseBreakpointValueOptions = Omit<UseBreakpointOptions, "breakpoints">;

function useBreakpointValue<T = any>(
  value: T[] | Record<string, T>,
  opts?: UseBreakpointValueOptions
): T | undefined;

Usage:

const breakpoint = useBreakpoint();

// Responsive value as first parameter
const value = useBreakpointValue({ base: "mobile", md: "desktop" });

// With options
const valueWithOptions = useBreakpointValue(
  { base: "mobile", md: "desktop" },
  { ssr: false }
);

useMediaQuery

Match media queries.

import { useMediaQuery } from "@chakra-ui/react";

interface UseMediaQueryOptions {
  ssr?: boolean;
  fallback?: boolean | boolean[];
}

function useMediaQuery(
  query: string | string[],
  options?: UseMediaQueryOptions
): boolean[];

Usage:

const [isLargerThan768] = useMediaQuery("(min-width: 768px)");

useDisclosure

Manage open/close state for modals, drawers, etc.

import { useDisclosure } from "@chakra-ui/react";

interface UseDisclosureProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpen?: () => void;
  onClose?: () => void;
  id?: string;
}

interface UseDisclosureReturn {
  open: boolean;
  onOpen: () => void;
  onClose: () => void;
  onToggle: () => void;
  setOpen: (open: boolean) => void;
}

function useDisclosure(props?: UseDisclosureProps): UseDisclosureReturn;

Usage:

const { open, onOpen, onClose } = useDisclosure();

useControllableState

Manage controlled/uncontrolled state.

import { useControllableState, useControllableProp } from "@chakra-ui/react";

interface UseControllableStateProps<T> {
  value?: T;
  defaultValue?: T;
  onChange?: (value: T) => void;
  shouldUpdate?: (prev: T, next: T) => boolean;
}

function useControllableState<T>(props: UseControllableStateProps<T>): [T, (value: T) => void];

function useControllableProp<T>(prop: T | undefined, state: T): [boolean, T];

Usage:

const [value, setValue] = useControllableState({
  value: controlledValue,
  defaultValue: "default",
  onChange: handleChange,
});

useCallbackRef

Create stable callback reference.

import { useCallbackRef } from "@chakra-ui/react";

function useCallbackRef<T extends (...args: any[]) => any>(
  callback: T | undefined,
  deps?: React.DependencyList
): T;

useLiveRef

Always current ref value.

import { useLiveRef } from "@chakra-ui/react";

function useLiveRef<T>(value: T): React.MutableRefObject<T>;

usePrevious

Get previous value from previous render.

import { usePrevious } from "@chakra-ui/react";

function usePrevious<T>(value: T): T | undefined;

useUpdateEffect

Effect that skips first render.

import { useUpdateEffect } from "@chakra-ui/react";

function useUpdateEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList
): void;

useSafeLayoutEffect

SSR-safe layout effect.

import { useSafeLayoutEffect } from "@chakra-ui/react";

const useSafeLayoutEffect: typeof React.useLayoutEffect;

useForceUpdate

Force component re-render.

import { useForceUpdate } from "@chakra-ui/react";

function useForceUpdate(): () => void;

useConst

Create constant value.

import { useConst } from "@chakra-ui/react";

function useConst<T>(init: T | (() => T)): T;

useElementRect

Get element bounding rectangle.

import { useElementRect } from "@chakra-ui/react";

function useElementRect(
  ref: React.RefObject<HTMLElement>
): DOMRect | undefined;

useListCollection

Manage list collection (from Ark UI).

import { useListCollection } from "@chakra-ui/react";

interface UseListCollectionProps<T> {
  items: T[];
  itemToString?: (item: T) => string;
  itemToValue?: (item: T) => string;
  itemToDisabled?: (item: T) => boolean;
}

interface UseListCollectionReturn<T> {
  items: T[];
  getItem: (value: string) => T | undefined;
  find: (value: string) => T | undefined;
  stringifyItem: (item: T) => string;
}

function useListCollection<T>(
  props: UseListCollectionProps<T>
): UseListCollectionReturn<T>;

useOverlay

Manage overlay state (internal use).

import { useOverlay } from "@chakra-ui/react";
// Internal hook - see component-specific hooks for overlay management

Component Hooks

Component-specific hooks from Ark UI are re-exported for direct use:

Accordion Hooks

import {
  useAccordion,
  useAccordionContext,
  useAccordionItemContext,
} from "@chakra-ui/react";

function useAccordion(props: UseAccordionProps): UseAccordionReturn;
function useAccordionContext(): AccordionContext;
function useAccordionItemContext(): AccordionItemContext;

Avatar Hooks

import { useAvatar, useAvatarContext } from "@chakra-ui/react";

function useAvatar(props: UseAvatarProps): UseAvatarReturn;
function useAvatarContext(): AvatarContext;

Checkbox Hooks

import {
  useCheckbox,
  useCheckboxContext,
  useCheckboxGroup,
  useCheckboxGroupContext,
  useCheckboxCard,
  useCheckboxCardContext,
} from "@chakra-ui/react";

function useCheckbox(props: UseCheckboxProps): UseCheckboxReturn;
function useCheckboxContext(): CheckboxContext;
function useCheckboxGroup(props: UseCheckboxGroupProps): UseCheckboxGroupReturn;
function useCheckboxGroupContext(): CheckboxGroupContext;

Clipboard Hooks

import { useClipboard, useClipboardContext } from "@chakra-ui/react";

function useClipboard(props: UseClipboardProps): UseClipboardReturn;
function useClipboardContext(): ClipboardContext;

Collapsible Hooks

import { useCollapsible, useCollapsibleContext } from "@chakra-ui/react";

function useCollapsible(props: UseCollapsibleProps): UseCollapsibleReturn;
function useCollapsibleContext(): CollapsibleContext;

ColorPicker Hooks

import { useColorPicker, useColorPickerContext } from "@chakra-ui/react";

function useColorPicker(props: UseColorPickerProps): UseColorPickerReturn;
function useColorPickerContext(): ColorPickerContext;

Combobox Hooks

import {
  useCombobox,
  useComboboxContext,
  useComboboxItemContext,
} from "@chakra-ui/react";

function useCombobox(props: UseComboboxProps): UseComboboxReturn;
function useComboboxContext(): ComboboxContext;
function useComboboxItemContext(): ComboboxItemContext;

Dialog and Drawer Hooks

import {
  useDialog,
  useDialogContext,
  useDrawer,
  useDrawerContext,
} from "@chakra-ui/react";

function useDialog(props: UseDialogProps): UseDialogReturn;
function useDialogContext(): DialogContext;
function useDrawer(props: UseDialogProps): UseDialogReturn;
function useDrawerContext(): DialogContext;

Editable Hooks

import { useEditable, useEditableContext } from "@chakra-ui/react";

function useEditable(props: UseEditableProps): UseEditableReturn;
function useEditableContext(): EditableContext;

Field Hooks

import { useFieldContext, useFieldsetContext } from "@chakra-ui/react";

function useFieldContext(): FieldContext;
function useFieldsetContext(): FieldsetContext;

FileUpload Hooks

import { useFileUpload, useFileUploadContext } from "@chakra-ui/react";

function useFileUpload(props: UseFileUploadProps): UseFileUploadReturn;
function useFileUploadContext(): FileUploadContext;

Highlight Hook

import { useHighlight } from "@chakra-ui/react";

interface UseHighlightProps {
  query: string | string[];
  text: string;
}

interface HighlightChunk {
  text: string;
  match: boolean;
}

function useHighlight(props: UseHighlightProps): HighlightChunk[];

HoverCard Hooks

import { useHoverCard, useHoverCardContext } from "@chakra-ui/react";

function useHoverCard(props: UseHoverCardProps): UseHoverCardReturn;
function useHoverCardContext(): HoverCardContext;

Listbox Hooks

import {
  useListbox,
  useListboxContext,
  useListboxItemContext,
} from "@chakra-ui/react";

function useListbox(props: UseListboxProps): UseListboxReturn;
function useListboxContext(): ListboxContext;
function useListboxItemContext(): ListboxItemContext;

Menu Hooks

import {
  useMenu,
  useMenuContext,
  useMenuItemContext,
} from "@chakra-ui/react";

function useMenu(props: UseMenuProps): UseMenuReturn;
function useMenuContext(): MenuContext;
function useMenuItemContext(): MenuItemContext;

NumberInput Hooks

import { useNumberInput, useNumberInputContext } from "@chakra-ui/react";

function useNumberInput(props: UseNumberInputProps): UseNumberInputReturn;
function useNumberInputContext(): NumberInputContext;

Pagination Hooks

import { usePagination, usePaginationContext } from "@chakra-ui/react";

function usePagination(props: UsePaginationProps): UsePaginationReturn;
function usePaginationContext(): PaginationContext;

PinInput Hooks

import { usePinInput, usePinInputContext } from "@chakra-ui/react";

function usePinInput(props: UsePinInputProps): UsePinInputReturn;
function usePinInputContext(): PinInputContext;

Popover Hooks

import { usePopover, usePopoverContext } from "@chakra-ui/react";

function usePopover(props: UsePopoverProps): UsePopoverReturn;
function usePopoverContext(): PopoverContext;

Progress Hooks

import { useProgress, useProgressContext } from "@chakra-ui/react";

function useProgress(props: UseProgressProps): UseProgressReturn;
function useProgressContext(): ProgressContext;

QrCode Hooks

import { useQrCode, useQrCodeContext } from "@chakra-ui/react";

function useQrCode(props: UseQrCodeProps): UseQrCodeReturn;
function useQrCodeContext(): QrCodeContext;

RadioGroup Hooks

import {
  useRadioGroup,
  useRadioGroupContext,
  useRadioGroupItemContext,
  useRadioCardGroup,
  useRadioCardContext,
  useRadioCardItemContext,
} from "@chakra-ui/react";

function useRadioGroup(props: UseRadioGroupProps): UseRadioGroupReturn;
function useRadioGroupContext(): RadioGroupContext;
function useRadioGroupItemContext(): RadioGroupItemContext;

RatingGroup Hooks

import {
  useRatingGroup,
  useRatingGroupContext,
  useRatingGroupItemContext,
} from "@chakra-ui/react";

function useRatingGroup(props: UseRatingGroupProps): UseRatingGroupReturn;
function useRatingGroupContext(): RatingGroupContext;
function useRatingGroupItemContext(): RatingGroupItemContext;

ScrollArea Hooks

import { useScrollArea, useScrollAreaContext } from "@chakra-ui/react";

function useScrollArea(props: UseScrollAreaProps): UseScrollAreaReturn;
function useScrollAreaContext(): ScrollAreaContext;

SegmentGroup Hooks

import {
  useSegmentGroup,
  useSegmentGroupContext,
  useSegmentGroupItemContext,
} from "@chakra-ui/react";

function useSegmentGroup(props: UseSegmentGroupProps): UseSegmentGroupReturn;
function useSegmentGroupContext(): SegmentGroupContext;
function useSegmentGroupItemContext(): SegmentGroupItemContext;

Select Hooks

import {
  useSelect,
  useSelectContext,
  useSelectItemContext,
} from "@chakra-ui/react";

function useSelect(props: UseSelectProps): UseSelectReturn;
function useSelectContext(): SelectContext;
function useSelectItemContext(): SelectItemContext;

Slider Hooks

import { useSlider, useSliderContext } from "@chakra-ui/react";

function useSlider(props: UseSliderProps): UseSliderReturn;
function useSliderContext(): SliderContext;

Steps Hooks

import {
  useSteps,
  useStepsContext,
  useStepsItemContext,
} from "@chakra-ui/react";

function useSteps(props: UseStepsProps): UseStepsReturn;
function useStepsContext(): StepsContext;
function useStepsItemContext(): StepsItemContext;

Switch Hooks

import { useSwitch, useSwitchContext } from "@chakra-ui/react";

function useSwitch(props: UseSwitchProps): UseSwitchReturn;
function useSwitchContext(): SwitchContext;

Tabs Hooks

import { useTabs, useTabsContext } from "@chakra-ui/react";

function useTabs(props: UseTabsProps): UseTabsReturn;
function useTabsContext(): TabsContext;

Toggle Hooks

import { useToggle, useToggleContext } from "@chakra-ui/react";

function useToggle(props: UseToggleProps): UseToggleReturn;
function useToggleContext(): ToggleContext;

Tooltip Hooks

import { useTooltip, useTooltipContext } from "@chakra-ui/react";

function useTooltip(props: UseTooltipProps): UseTooltipReturn;
function useTooltipContext(): TooltipContext;

TreeView Hooks

import {
  useTreeView,
  useTreeViewContext,
  useTreeViewNodeContext,
} from "@chakra-ui/react";

function useTreeView(props: UseTreeViewProps): UseTreeViewReturn;
function useTreeViewContext(): TreeViewContext;
function useTreeViewNodeContext(): TreeViewNodeContext;

Usage Patterns

All component hooks follow similar patterns:

  1. State Management: Hooks like useDialog, useDisclosure manage open/close state
  2. Context Access: Context hooks like useDialogContext access component state from context
  3. Prop Getters: Return functions like getTriggerProps() that provide proper ARIA attributes
  4. Type Safety: All hooks are fully typed with TypeScript

Example Pattern:

const dialog = useDialog({ defaultOpen: false });
// Returns: { open, setOpen, getTriggerProps, getContentProps, ... }

// In nested components:
const dialogContext = useDialogContext();
// Accesses the same state as parent useDialog

Slot Recipe Style Hooks

Component style hooks provide access to resolved slot recipe styles for multi-part components. Each multi-part component exports a use[Component]Styles hook that returns the resolved styles for all component slots.

import {
  useAccordionStyles,
  useActionBarStyles,
  useAlertStyles,
  useAvatarStyles,
  useBlockquoteStyles,
  useBreadcrumbStyles,
  useCardStyles,
  useCheckboxCardStyles,
  useCheckboxStyles,
  useClipboardStyles,
  useCollapsibleStyles,
  useComboboxStyles,
  useDataListStyles,
  useDialogStyles,
  useDrawerStyles,
  useEditableStyles,
  useEmptyStateStyles,
  useFieldsetStyles,
  useFieldStyles,
  useFileUploadStyles,
  useHoverCardStyles,
  useListboxStyles,
  useListStyles,
  useMenuStyles,
  useNativeSelectStyles,
  useNumberInputStyles,
  usePaginationStyles,
  usePinInputStyles,
  usePopoverStyles,
  useProgressCircleStyles,
  useProgressStyles,
  useQrCodeStyles,
  useRadioCardStyles,
  useRadioGroupStyles,
  useRatingGroupStyles,
  useScrollAreaStyles,
  useSegmentGroupStyles,
  useSelectStyles,
  useSliderStyles,
  useStatStyles,
  useStatusStyles,
  useStepsStyles,
  useSwitchStyles,
  useTableStyles,
  useTabsStyles,
  useTagStyles,
  useTimelineStyles,
  useToastStyles,
  useTooltipStyles,
  useTreeViewStyles,
} from "@chakra-ui/react";

// Each hook returns resolved styles for component slots
// Example: Dialog component
function useDialogStyles(): {
  backdrop: SystemStyleObject;
  content: SystemStyleObject;
  header: SystemStyleObject;
  body: SystemStyleObject;
  footer: SystemStyleObject;
  closeTrigger: SystemStyleObject;
  // ... other slots
};

Usage Example:

import { useDialogStyles } from "@chakra-ui/react";

function CustomDialog() {
  const styles = useDialogStyles();

  // Access resolved styles for each slot
  return (
    <div style={styles.backdrop}>
      <div style={styles.content}>
        <div style={styles.header}>Title</div>
        <div style={styles.body}>Content</div>
      </div>
    </div>
  );
}

These hooks are useful when building custom components that need to match Chakra UI's component styling or when creating wrapper components that need access to the resolved theme styles.