Support ref forwarding

.eslintrc.json

@@ -18,7 +18,9 @@
     "sourceType": "module"
   },
   "plugins": ["react", "@typescript-eslint"],
-  "rules": {},
+  "rules": {
+    "react/prop-types": 0
+  },
   "settings": {
     "react": {
       "version": "detect"

.gitignore

@@ -9,4 +9,6 @@ dist
 .cache
 
 # Yarn
-yarn-error.log
+yarn-error.log
+
+.DS_Store

packages/react-div-100vh/src/index.tsx

@@ -1,26 +1,29 @@
-import React, { useState, useEffect, HTMLAttributes } from 'react'
+import React, { forwardRef, useState, useEffect, HTMLAttributes } from 'react'
 
 let warned = false
 
-export default function Div100vh({
-  style = {},
-  ...other
-}: HTMLAttributes<HTMLDivElement>): JSX.Element {
-  const height = use100vh()
+const Div100vh = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ style, ...other }, ref) => {
+    const height = use100vh()
 
-  // TODO: warn only in development
-  if (!warned && style.height) {
-    warned = true
-    console.warn(
-      '<ReactDiv100vh /> overrides the height property of the style prop'
-    )
-  }
-  const styleWithRealHeight = {
-    ...style,
-    height: height ? `${height}px` : '100vh'
+    // TODO: warn only in development
+    if (!warned && style?.height) {
+      warned = true
+      console.warn(
+        '<ReactDiv100vh /> overrides the height property of the style prop'
+      )
+    }
+    const styleWithRealHeight = {
+      ...style,
+      height: height ? `${height}px` : '100vh'
+    }
+    return <div ref={ref} style={styleWithRealHeight} {...other} />
   }
-  return <div style={styleWithRealHeight} {...other} />
-}
+)
+
+Div100vh.displayName = 'Div100vh'
+
+export default Div100vh
 
 export function use100vh(): number | null {
   const [height, setHeight] = useState<number | null>(measureHeight)

packages/react-div-100vh/src/jsdom.test.tsx

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 import Div100vh from '.'
 import { act } from 'react-dom/test-utils'
@@ -59,4 +59,37 @@ describe('Div100vh component', () => {
     )
     expect(resizeListenerUnmountCalls.length).toBe(1)
   })
+
+  it('forwards ref', () => {
+    let focus: () => void
+    const TestApp = () => {
+      const ref = useRef<HTMLDivElement>(null)
+      focus = () => {
+        ref.current?.focus()
+      }
+      return (
+        <Div100vh
+          ref={ref}
+          // so we look up the target div by different means (not via the ref)
+          data-test
+          // https://github.com/jsdom/jsdom/issues/2586#issuecomment-561871527
+          tabIndex={1}
+        >
+          hello
+        </Div100vh>
+      )
+    }
+    act(() => {
+      render(<TestApp />, container)
+    })
+
+    const divElement = container?.querySelector('[data-test]')
+    expect(document.activeElement === divElement).toBe(false)
+
+    act(() => {
+      focus()
+    })
+
+    expect(document.activeElement === divElement).toBe(true)
+  })
 })