From bf447856d6b0eedef2393150c0c517212a02f619 Mon Sep 17 00:00:00 2001
From: Anthony Rimet <anthony.rimet03@gmail.com>
Date: Wed, 20 Dec 2023 17:46:28 +0100
Subject: [PATCH] Feat(usePreference): Throw an error if use outisde right
 context

---
 docs/Configurable.md                                        | 3 +--
 docs/Reference.md                                           | 2 +-
 packages/ra-core/src/preferences/usePreference.ts           | 6 ++++++
 .../src/preferences/Configurable.stories.tsx                | 5 +++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/Configurable.md b/docs/Configurable.md
index 3d35b20743c..302f104271d 100644
--- a/docs/Configurable.md
+++ b/docs/Configurable.md
@@ -37,7 +37,7 @@ const ConfigurableTextBlock = ({ preferenceKey = "textBlock", ...props }) => (
 
 `<Configurable>` creates a context for the `preferenceKey`, so that both the child component and the editor can access it.
 
-The editor commponent lets users edit the preferences for the configurable compoonent. It does so using the `usePreference` hook, which is a namespaced version of [the `useStore` hook](./useStore.md) for the current `preferenceKey`:
+The editor commponent lets users edit the preferences for the configurable component. It does so using the `usePreference` hook, which is a namespaced version of [the `useStore` hook](./useStore.md) for the current `preferenceKey`:
 
 ```jsx
 import { usePreference } from 'react-admin';
@@ -58,7 +58,6 @@ const TextBlockEditor = () => {
     );
 };
 ```
- 
 The inner component reads the preferences using the same `usePreference` hook:
 
 ```jsx
diff --git a/docs/Reference.md b/docs/Reference.md
index c17f038a678..a97b2c9bbe8 100644
--- a/docs/Reference.md
+++ b/docs/Reference.md
@@ -276,7 +276,7 @@ title: "Index"
 
 **- P -**
 * [`usePermissions`](./usePermissions.md)
-* [`usePreferences`](https://marmelab.com/ra-enterprise/modules/ra-preferences#usepreferences-reading-and-writing-user-preferences)<img class="icon" src="./img/premium.svg" />
+* [`usePreference`](./Configurable.md#usage)
 * [`usePublish`](./usePublish.md)<img class="icon" src="./img/premium.svg" />
 
 **- R -**
diff --git a/packages/ra-core/src/preferences/usePreference.ts b/packages/ra-core/src/preferences/usePreference.ts
index 26dc90a1fe2..cc3564753a0 100644
--- a/packages/ra-core/src/preferences/usePreference.ts
+++ b/packages/ra-core/src/preferences/usePreference.ts
@@ -14,6 +14,12 @@ import { usePreferenceKey } from './PreferenceKeyContext';
  */
 export const usePreference = <T = any>(key?: string, defaultValue?: T) => {
     const preferenceKey = usePreferenceKey();
+    if (!preferenceKey) {
+        throw new Error(
+            "usePreference cannot be used outside of a Configurable component. Did you forget to wrap your component with <Configurable>? If you don't want to use Configurable, you can use the useStore hook instead."
+        );
+    }
+
     return useStore<T>(
         preferenceKey && key ? `${preferenceKey}.${key}` : preferenceKey ?? key,
         defaultValue
diff --git a/packages/ra-ui-materialui/src/preferences/Configurable.stories.tsx b/packages/ra-ui-materialui/src/preferences/Configurable.stories.tsx
index 7b9e82ad301..8567ff774e7 100644
--- a/packages/ra-ui-materialui/src/preferences/Configurable.stories.tsx
+++ b/packages/ra-ui-materialui/src/preferences/Configurable.stories.tsx
@@ -218,3 +218,8 @@ export const I18n = () => {
 };
 
 export const NotInContext = () => <TextBlock />;
+
+export const UsePreferenceOutsideConfigurable = () => {
+    const [color] = usePreference('color', '#ffffff');
+    return <TextBlock color={color} />;
+};