heroui-inc/heroui · error · Error

useYearPicker must be used within a <Calendar> or <RangeCale

Error message

useYearPicker must be used within a <Calendar> or <RangeCalendar> component.

What it means

useYearPicker reads YearPickerContext, which is only supplied by the Calendar/RangeCalendar implementations that include the year picker feature. When the context is null (hook called outside those providers) it throws, because the returned value (open state, grid slot, calendar ref) has no meaningful default.

Source

Thrown at packages/react/src/components/calendar-year-picker/year-picker-context.ts:29

 * -----------------------------------------------------------------------------------------------*/
interface YearPickerContextValue {
  isYearPickerOpen: boolean;
  setIsYearPickerOpen: (open: boolean) => void;
  calendarRef: React.RefObject<HTMLDivElement | null>;
  calendarGridSlot: "calendar-grid" | "range-calendar-grid";
}

const YearPickerContext = createContext<YearPickerContextValue | null>(null);

/**
 * Hook to consume YearPickerContext.
 * Must be used inside Calendar or RangeCalendar.
 */
function useYearPicker(): YearPickerContextValue {
  const context = use(YearPickerContext);

  if (!context) {
    throw new Error("useYearPicker must be used within a <Calendar> or <RangeCalendar> component.");
  }

  return context;
}

export {YearPickerContext, useYearPicker};
export type {YearPickerContextValue};

View on GitHub (pinned to 7546fff813)

Solutions

1. Render the consuming component inside <Calendar> or <RangeCalendar>
2. Wrap the component under test with the required calendar provider in tests/stories
3. If you need year-picker behavior standalone, build your own state instead of consuming this hook

Example fix

// before
const {isYearPickerOpen} = useYearPicker(); // outside calendar

// after
<Calendar>
  <MyPart /> {/* uses useYearPicker inside */}
</Calendar>

// Render consumers only inside:
// <Calendar>...<YourPart/></Calendar> or <RangeCalendar>...<YourPart/></RangeCalendar>

When it happens

Trigger: Calling useYearPicker() in a custom component that is not rendered inside <Calendar> or <RangeCalendar>; using the exported hook directly in app code or in a story rendered without the calendar wrapper.

Common situations: Exporting custom calendar sub-parts that consume the year picker context, unit-testing a sub-component in isolation without wrapping it in the calendar, or refactoring that moves a consumer out of the provider subtree.

Related errors

• useCalendarOrRangeState must be used within a <Calendar> or
• CalendarYearPicker trigger components must be used within <C
• CalendarYearPicker components must be used within <CalendarY
• Ref was not connected to DOM element returned by custom `ren

AI-assisted analysis of heroui-inc/heroui@7546fff813 (2026-08-28). Data as JSON: /api/errors/03904429a258a80d. Report an issue: GitHub.