tessl/npm-chakra-ui--react

Comprehensive React component library for building accessible, responsive user interfaces with 109+ pre-built components, design tokens, and type-safe styling system

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Hooks

Name: tessl/npm-chakra-ui--react
Author: tessl

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:

State Management: Hooks like useDialog, useDisclosure manage open/close state
Context Access: Context hooks like useDialogContext access component state from context
Prop Getters: Return functions like getTriggerProps() that provide proper ARIA attributes
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.

Install with Tessl CLI