refactor: add display names

TanStack · Mar 20, 2023 · 93c8630 · 93c8630
1 parent f541504
commit 93c8630
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/packages/react-query-devtools/src/styledComponents.ts b/packages/react-query-devtools/src/styledComponents.ts
@@ -20,6 +20,8 @@ export const Panel = styled(
   },
 )
 
+Panel.displayName = 'Panel'
+
 export const ActiveQueryPanel = styled(
   'div',
   () => ({
@@ -36,6 +38,8 @@ export const ActiveQueryPanel = styled(
   },
 )
 
+ActiveQueryPanel.displayName = 'ActiveQueryPanel'
+
 export const Button = styled('button', (props, theme) => ({
   appearance: 'none',
   fontSize: '.9em',
@@ -49,13 +53,17 @@ export const Button = styled('button', (props, theme) => ({
   cursor: 'pointer',
 }))
 
+Button.displayName = 'Button'
+
 export const QueryKeys = styled('span', {
   display: 'flex',
   flexWrap: 'wrap',
   gap: '0.5em',
   fontSize: '0.9em',
 })
 
+QueryKeys.displayName = 'QueryKeys'
+
 export const QueryKey = styled('span', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -65,12 +73,16 @@ export const QueryKey = styled('span', {
   borderRadius: '.2em',
 })
 
+QueryKey.displayName = 'QueryKey'
+
 export const Code = styled('code', {
   fontSize: '.9em',
   color: 'inherit',
   background: 'inherit',
 })
 
+Code.displayName = 'Code'
+
 export const Input = styled('input', (_props, theme) => ({
   backgroundColor: theme.inputBackgroundColor,
   border: 0,
@@ -81,6 +93,8 @@ export const Input = styled('input', (_props, theme) => ({
   padding: '.3em .4em',
 }))
 
+Input.displayName = 'Input'
+
 export const Select = styled(
   'select',
   (_props, theme) => ({
@@ -108,3 +122,5 @@ export const Select = styled(
     },
   },
 )
+
+Select.displayName = 'Select'