diff --git a/.changeset/olive-zebras-pump.md b/.changeset/olive-zebras-pump.md new file mode 100644 index 000000000..091546703 --- /dev/null +++ b/.changeset/olive-zebras-pump.md @@ -0,0 +1,5 @@ +--- +'@emotion/react': patch +--- + +Added display names to public React contexts in development builds. This helps to recognize them in React Developer Tools. diff --git a/packages/react/src/context.js b/packages/react/src/context.js index 0620fb9e0..e74d4de21 100644 --- a/packages/react/src/context.js +++ b/packages/react/src/context.js @@ -18,6 +18,10 @@ let EmotionCacheContext: React.Context = : null ) +if (process.env.NODE_ENV !== 'production') { + EmotionCacheContext.displayName = 'EmotionCacheContext' +} + export let CacheProvider = EmotionCacheContext.Provider export let __unsafe_useEmotionCache = diff --git a/packages/react/src/theming.js b/packages/react/src/theming.js index 16d1d8cd4..16c6d91cd 100644 --- a/packages/react/src/theming.js +++ b/packages/react/src/theming.js @@ -4,6 +4,9 @@ import weakMemoize from '@emotion/weak-memoize' import hoistNonReactStatics from './isolated-hoist-non-react-statics-do-not-use-this-in-your-code' export const ThemeContext = /* #__PURE__ */ React.createContext({}) +if (process.env.NODE_ENV !== 'production') { + ThemeContext.displayName = 'EmotionThemeContext' +} export const useTheme = () => React.useContext(ThemeContext)