marmelab/react-admin · error · Error

usePreferencesEditor must be used within a PreferencesEditor

Error message

usePreferencesEditor must be used within a PreferencesEditorContextProvider

What it means

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.

Source

Thrown at packages/ra-core/src/preferences/usePreferencesEditor.ts:11

import { useContext } from 'react';
import {
    PreferencesEditorContext,
    PreferencesEditorContextValue,
} from './PreferencesEditorContext';

export const usePreferencesEditor = (): PreferencesEditorContextValue => {
    const context = useContext(PreferencesEditorContext);

    if (!context) {
        throw new Error(
            'usePreferencesEditor must be used within a PreferencesEditorContextProvider'
        );
    }

    return context;
};

View on GitHub (pinned to 051f511bb0)

Solutions

1. Ensure you're inside <Admin> with the preferences editor enabled (checkInspector support / supported admin layout), or wrap manually with <PreferencesEditorContextProvider> in tests.
2. Render the component inside the standard react-admin Layout so it is under the provider.
3. Provide the context yourself via PreferencesEditorContextProvider with the same value shape your custom layout receives from usePreferencesEditor setup.

Example fix

// before (test/story)
render(<MyPreferencesPanel />); // throws

// after
import { PreferencesEditorContext } from 'ra-core';
render(
    <PreferencesEditorContext.Provider
        value={{ selectedKeys: [], setTitle: () => {}, setSelectedKeys: () => {} }}
    >
        <MyPreferencesPanel />
    </PreferencesEditorContext.Provider>
);

import { useContext } from 'react';
import { PreferencesEditorContext } from 'ra-core';
const ctx = useContext(PreferencesEditorContext);
if (!ctx) {
    // don't render preference-editing UI outside the Admin with editor support
    return null;
}

const hasPreferencesEditor = (v: PreferencesEditorContextValue | null): v is PreferencesEditorContextValue => v != null;

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• usePreference cannot be used outside of a Configurable compo
• useSetInspectorTitle cannot be called outside of a Preferenc
• useTranslatableContext must be used inside a TranslatableCon
• useCloseNotification must be used within a CloseNotification
• Cannot call an event handler while rendering.

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/cee66ab1c4bfcae2. Report an issue: GitHub.