{"record":{"id":"03904429a258a80d","repo":"heroui-inc/heroui","slug":"useyearpicker-must-be-used-within-a-calendar-or","errorCode":null,"errorMessage":"useYearPicker must be used within a <Calendar> or <RangeCalendar> component.","messagePattern":"useYearPicker must be used within a <Calendar> or <RangeCalendar> component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/components/calendar-year-picker/year-picker-context.ts","lineNumber":29,"sourceCode":" * -----------------------------------------------------------------------------------------------*/\ninterface YearPickerContextValue {\n  isYearPickerOpen: boolean;\n  setIsYearPickerOpen: (open: boolean) => void;\n  calendarRef: React.RefObject<HTMLDivElement | null>;\n  calendarGridSlot: \"calendar-grid\" | \"range-calendar-grid\";\n}\n\nconst YearPickerContext = createContext<YearPickerContextValue | null>(null);\n\n/**\n * Hook to consume YearPickerContext.\n * Must be used inside Calendar or RangeCalendar.\n */\nfunction useYearPicker(): YearPickerContextValue {\n  const context = use(YearPickerContext);\n\n  if (!context) {\n    throw new Error(\"useYearPicker must be used within a <Calendar> or <RangeCalendar> component.\");\n  }\n\n  return context;\n}\n\nexport {YearPickerContext, useYearPicker};\nexport type {YearPickerContextValue};\n","sourceCodeStart":11,"sourceCodeEnd":37,"githubUrl":"https://github.com/heroui-inc/heroui/blob/7546fff8136f538a2f56a52257c621a5cd616a1d/packages/react/src/components/calendar-year-picker/year-picker-context.ts#L11-L37","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Render the consuming component inside <Calendar> or <RangeCalendar>","Wrap the component under test with the required calendar provider in tests/stories","If you need year-picker behavior standalone, build your own state instead of consuming this hook"],"exampleFix":"// before\nconst {isYearPickerOpen} = useYearPicker(); // outside calendar\n\n// after\n<Calendar>\n  <MyPart /> {/* uses useYearPicker inside */}\n</Calendar>","handlingStrategy":"validation","validationCode":"// Render consumers only inside:\n// <Calendar>...<YourPart/></Calendar> or <RangeCalendar>...<YourPart/></RangeCalendar>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep year-picker consumers within the calendar subtree","When unit-testing, mount the part inside the full calendar","Treat useYearPicker as internal API; don't call it directly in apps"],"tags":["react","context","calendar","hooks","compound-components"],"backgroundTag":"react-context-provider-missing","analyzedSha":"7546fff8136f538a2f56a52257c621a5cd616a1d","analyzedAt":"2026-08-28T13:15:49.959Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}