Recalculate on window resize and <details> toggle

src/index.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import './index.css'
 
 const myClassName = 'react-auto-height'
@@ -115,6 +115,27 @@ function AutoHeight({children, element = 'div', className: propClassName = '', .
 
   useEffect(updateHeight)
 
+  // recalculate height on <details> toggle and window resize by forcing rerender
+  const [_, setStateToRerender] = useState()
+  useEffect(() => {
+    let isMounted = true
+    const forceRerender = (e) => {
+      setTimeout(() => {
+        if (isMounted) setStateToRerender({})
+      })
+    }
+    addEventListener('toggle', forceRerender, true)
+    addEventListener('resize', forceRerender, true)
+    addEventListener('orientationchange', forceRerender, true)
+
+    return () => {
+      isMounted = false
+      removeEventListener('toggle', forceRerender)
+      removeEventListener('resize', forceRerender)
+      removeEventListener('orientationchange', forceRerender)
+    }
+  }, [])
+
   return (
     <Element ref={ref} className={`${myClassName} ${propClassName}`} {...props}>
       {typeof children === 'function' ? children(updateHeight) : children}

stories/index.jsx

@@ -277,3 +277,36 @@ storiesOf('AutoHeight')
       </>
     )
   })
+  .add('window resize and <details> element toggle', () => {
+    const [isShort, setIsShort] = useState(true)
+    const handleClick = () => setIsShort((prev) => !prev)
+    const extra = isShort ? null : (
+      <>
+        <p> ... extra paragraph 1</p>
+        <p> ... extra paragraph 2</p>
+      </>
+    )
+
+    return (
+      <>
+        {intro}
+        <pre style={{whiteSpace: 'pre-wrap'}}>
+          <AutoHeight>
+            {'<AutoHeight>\n'}
+            {'  '}Here is some content that can wrap to multiple lines, so that resizing window
+            width might change the height of the parent element...
+            {'\n  <details>'}
+            <details>
+              <summary style={{background: 'yellowgreen', cursor: 'pointer'}}>
+                {'  <summary>Click here to expand the HTML details element</summary>'}
+              </summary>
+              {'    '}This is the contents of the details element. It might also wrap to multiple
+              lines if the window is narrow enough.
+            </details>
+            {'  </details>\n'}
+            {'</AutoHeight>'}
+          </AutoHeight>
+        </pre>
+      </>
+    )
+  })