Add displayNames to Global and ClassNames components (#2132)

* add displayName for Global component * add displayName to ClassNames * add displayName to component returned by withEmotionCache * add changeset * add optional displayName to withEmotionCache func * fix func type * revert changes in withEmotionCache * Update .changeset/kind-dots-confess.md Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
emotion-js · Dec 5, 2020 · 3f8bf70 · 3f8bf70
1 parent 0d47e57
commit 3f8bf70
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/.changeset/kind-dots-confess.md b/.changeset/kind-dots-confess.md
@@ -0,0 +1,5 @@
+---
+'@emotion/react': patch
+---
+
+`displayName`s have been added to `Global` and `ClassNames` components so React Developer Tools should display those better now.
diff --git a/packages/react/src/class-names.js b/packages/react/src/class-names.js
@@ -142,3 +142,7 @@ export const ClassNames: React.AbstractComponent<
   }
   return ele
 })
+
+if (process.env.NODE_ENV !== 'production') {
+  ClassNames.displayName = 'EmotionClassNames'
+}
diff --git a/packages/react/src/global.js b/packages/react/src/global.js
@@ -136,3 +136,7 @@ export let Global: React.AbstractComponent<
 
   return null
 })
+
+if (process.env.NODE_ENV !== 'production') {
+  Global.displayName = 'EmotionGlobal'
+}