fix: Add containerElement prop to customize devtools container element, default to 'footer' (#77)

Author: mturley

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: {

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>
   )
 }