{"record":{"id":"cee66ab1c4bfcae2","repo":"marmelab/react-admin","slug":"usepreferenceseditor-must-be-used-within-a-prefere","errorCode":null,"errorMessage":"usePreferencesEditor must be used within a PreferencesEditorContextProvider","messagePattern":"usePreferencesEditor must be used within a PreferencesEditorContextProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/preferences/usePreferencesEditor.ts","lineNumber":11,"sourceCode":"import { useContext } from 'react';\nimport {\n    PreferencesEditorContext,\n    PreferencesEditorContextValue,\n} from './PreferencesEditorContext';\n\nexport const usePreferencesEditor = (): PreferencesEditorContextValue => {\n    const context = useContext(PreferencesEditorContext);\n\n    if (!context) {\n        throw new Error(\n            'usePreferencesEditor must be used within a PreferencesEditorContextProvider'\n        );\n    }\n\n    return context;\n};\n","sourceCodeStart":1,"sourceCodeEnd":18,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/preferences/usePreferencesEditor.ts#L1-L18","documentation":"usePreferencesEditor gives access to the preferences editor context (setSelectedKeys, setTitle, etc.) provided by PreferencesEditorContextProvider, which react-admin sets up as part of <Admin> when the UI factory/configurable UI is enabled. It throws when the context is undefined, meaning no provider exists above the calling component.","triggerScenarios":"Calling usePreferencesEditor() in an <Admin> rendered without the preferences editor (default UI without Configurable support), or in a component mounted outside the Admin layout tree; using it in unit tests without the provider.","commonSituations":"Building a custom sidebar/editor component that manipulates preferences in an app using a custom Layout missing the PreferencesEditorContextProvider; older react-admin versions or builds where preferences editing is disabled; storybook setups rendering the hook directly.","solutions":["Ensure you're inside <Admin> with the preferences editor enabled (checkInspector support / supported admin layout), or wrap manually with <PreferencesEditorContextProvider> in tests.","Render the component inside the standard react-admin Layout so it is under the provider.","Provide the context yourself via PreferencesEditorContextProvider with the same value shape your custom layout receives from usePreferencesEditor setup."],"exampleFix":"// before (test/story)\nrender(<MyPreferencesPanel />); // throws\n\n// after\nimport { PreferencesEditorContext } from 'ra-core';\nrender(\n    <PreferencesEditorContext.Provider\n        value={{ selectedKeys: [], setTitle: () => {}, setSelectedKeys: () => {} }}\n    >\n        <MyPreferencesPanel />\n    </PreferencesEditorContext.Provider>\n);","handlingStrategy":"validation","validationCode":"import { useContext } from 'react';\nimport { PreferencesEditorContext } from 'ra-core';\nconst ctx = useContext(PreferencesEditorContext);\nif (!ctx) {\n    // don't render preference-editing UI outside the Admin with editor support\n    return null;\n}","typeGuard":"const hasPreferencesEditor = (v: PreferencesEditorContextValue | null): v is PreferencesEditorContextValue => v != null;","tryCatchPattern":null,"preventionTips":["Only build preferences editor UI inside <Admin> with the preferences editor enabled.","Provide PreferencesEditorContext.Provider in tests/stories for editor components.","Verify custom Layouts include the inspector/preferences editor setup."],"tags":["react","context","preferences","hooks"],"backgroundTag":"react-hook-outside-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}