feat: allow StatsGl style customization via prop and forward ref (#2030)

src/core/StatsGl.tsx

@@ -1,37 +1,55 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '../helpers/ts-utils'
 import { addAfterEffect, useThree } from '@react-three/fiber'
+import * as React from 'react'
+
 import Stats from 'stats-gl'
 
 type Props = Partial<Stats> & {
-  showPanel?: number
-  className?: string
-  parent?: React.RefObject<HTMLElement>
+    id?: string
+    clearStatsGlStyle?: boolean
+    showPanel?: number
+    className?: string
+    parent?: React.RefObject<HTMLElement>
+    ref?: React.RefObject<HTMLElement>
 }
 
-export function StatsGl({ className, parent, ...props }: Props) {
-  const gl: any = useThree((state) => state.gl)
-
-  const stats = React.useMemo(() => {
-    const stats = new Stats({
-      ...props,
-    })
-    stats.init(gl)
-    return stats
-  }, [gl])
-
-  React.useEffect(() => {
-    if (stats) {
-      const node = (parent && parent.current) || document.body
-      node?.appendChild(stats.dom)
-      const classNames = (className ?? '').split(' ').filter((cls) => cls)
-      if (classNames.length) stats.dom.classList.add(...classNames)
-      const end = addAfterEffect(() => stats.update())
-      return () => {
-        if (classNames.length) stats.dom.classList.remove(...classNames)
-        node?.removeChild(stats.dom)
-        end()
-      }
+export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__ */ React.forwardRef(
+    ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => {
+        const gl: any = useThree((state) => state.gl)
+
+        const stats = React.useMemo(() => {
+            const stats = new Stats({
+                ...props,
+            })
+            stats.init(gl)
+            return stats
+        }, [gl])
+
+        React.useImperativeHandle(fref, () => stats.dom)
+
+        React.useEffect(() => {
+            if (stats) {
+                const node = (parent && parent.current) || document.body
+                node?.appendChild(stats.dom)
+                stats.dom.querySelectorAll('canvas').forEach((canvas) => {
+                    canvas.style.removeProperty('position')
+                })
+                if (id) stats.dom.id = id
+                if (clearStatsGlStyle) stats.dom.removeAttribute('style')
+                stats.dom.removeAttribute('style')
+                const classNames = (className ?? '').split(' ').filter((cls) => cls)
+                if (classNames.length) stats.dom.classList.add(...classNames)
+                const end = addAfterEffect(() => stats.update())
+                return () => {
+                    if (classNames.length) stats.dom.classList.remove(...classNames)
+                    node?.removeChild(stats.dom)
+                    end()
+                }
+            }
+        }, [parent, stats, className, id, clearStatsGlStyle])
+
+        return null
     }
-  }, [parent, stats, className])
-  return null
-}
+)
+
+StatsGl.displayName = 'StatsGl'