fix: Add containerElement prop to customize devtools container elemen…

…t, default to 'footer' (#77)
tannerlinsley · Nov 5, 2020 · e2b7527 · e2b7527
1 parent d1d15e1
commit e2b7527
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -29,6 +29,12 @@ export function ReactQueryDevtools(props: {
    * Defaults to 'bottom-left'.
    */
   position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  /**
+   * Use this to render the devtools inside a different type of container element for a11y purposes.
+   * Any string which corresponds to a valid intrinsic JSX element is allowed.
+   * Defaults to 'footer'.
+   */
+  containerElement?: keyof JSX.IntrinsicElements
 }): React.ReactElement
 
 export function ReactQueryDevtoolsPanel(props: {

diff --git a/src/index.js b/src/index.js
@@ -46,6 +46,7 @@ export function ReactQueryDevtools({
   closeButtonProps = {},
   toggleButtonProps = {},
   position = 'bottom-left',
+  containerElement: Container = 'footer',
 }) {
   const rootRef = React.useRef()
   const panelRef = React.useRef()
@@ -94,7 +95,7 @@ export function ReactQueryDevtools({
   } = toggleButtonProps
 
   return (
-    <div ref={rootRef} className="ReactQueryDevtools">
+    <Container ref={rootRef} className="ReactQueryDevtools">
       {isResolvedOpen ? (
         <ThemeProvider theme={theme}>
           <ReactQueryDevtoolsPanel
@@ -192,7 +193,7 @@ export function ReactQueryDevtools({
           <Logo aria-hidden />
         </button>
       )}
-    </div>
+    </Container>
   )
 }