From e2b7527a51caaea1263886856c9024dd10562b84 Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Thu, 5 Nov 2020 17:47:37 -0500
Subject: [PATCH] fix: Add containerElement prop to customize devtools
 container element, default to 'footer' (#77)

---
 index.d.ts   | 6 ++++++
 src/index.js | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index fec48ac..0f6f400 100644
--- 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
index 55afb20..f44c2c1 100644
--- 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>
   )
 }