(\n ComponentInner: ComponentType,\n options: ResizeDetectorProps = {}\n) {\n class ResizeDetectorHOC extends Component<\n PropsWithoutResizeDetectorDimensions & { forwardedRef: ForwardedRef }\n > {\n ref = createRef();\n\n render() {\n const { forwardedRef, ...rest } = this.props;\n const targetRef = forwardedRef ?? this.ref;\n\n return (\n }>\n \n \n );\n }\n }\n\n function forwardRefWrapper(props: PropsWithoutResizeDetectorDimensions, ref: ForwardedRef) {\n return ;\n }\n\n const name = ComponentInner.displayName || ComponentInner.name;\n forwardRefWrapper.displayName = `withResizeDetector(${name})`;\n\n return forwardRef(forwardRefWrapper);\n}\n\n// Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types\n// https://github.com/Microsoft/TypeScript/issues/28339\ntype PropsWithoutResizeDetectorDimensions = Without, 'width'>, 'height'>;\ntype Without = Key extends keyof T ? Omit : T;\ntype OptionalKey = Key extends keyof T ? Omit & { [K in Key]?: T[K] } : T;\n\nexport default withResizeDetector;\n","import { useLayoutEffect, useEffect, useState, useRef } from 'react';\nimport type { MutableRefObject } from 'react';\nimport type { DebouncedFunc } from 'lodash';\n\nimport { patchResizeHandler, createNotifier, isSSR } from './utils';\n\nimport type { PatchedResizeObserverCallback } from './utils';\nimport type { Props, ReactResizeDetectorDimensions } from './ResizeDetector';\n\nconst useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;\n\nexport interface useResizeDetectorProps extends Props {\n targetRef?: MutableRefObject;\n}\n\nfunction useResizeDetector(props: useResizeDetectorProps = {}): UseResizeDetectorReturn {\n const {\n skipOnMount = false,\n refreshMode,\n refreshRate = 1000,\n refreshOptions,\n handleWidth = true,\n handleHeight = true,\n targetRef,\n observerOptions,\n onResize\n } = props;\n\n const skipResize = useRef(skipOnMount);\n const localRef = useRef(null);\n const resizeHandler = useRef();\n\n const ref = targetRef ?? localRef;\n\n const [size, setSize] = useState({\n width: undefined,\n height: undefined\n });\n\n useEnhancedEffect(() => {\n if (!handleWidth && !handleHeight) return;\n\n const notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);\n\n const resizeCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {\n if (!handleWidth && !handleHeight) return;\n\n entries.forEach(entry => {\n const { width, height } = (entry && entry.contentRect) || {};\n\n const shouldSetSize = !skipResize.current;\n if (shouldSetSize) {\n notifyResize({ width, height });\n }\n\n skipResize.current = false;\n });\n };\n\n resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);\n\n const resizeObserver = new window.ResizeObserver(resizeHandler.current);\n\n if (ref.current) {\n resizeObserver.observe(ref.current, observerOptions);\n }\n\n return () => {\n resizeObserver.disconnect();\n (resizeHandler.current as DebouncedFunc).cancel?.();\n };\n }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);\n\n return { ref, ...size };\n}\n\nexport default useResizeDetector;\n\nexport interface UseResizeDetectorReturn extends ReactResizeDetectorDimensions {\n ref: MutableRefObject;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React, { useCallback, useState } from 'react';\nimport { default as DetectableOverflow, useOverflowDetector } from 'react-detectable-overflow';\nimport './App.css';\n\nconst repoURL = 'https://github.com/h-kanazawa/react-detectable-overflow';\nconst demoURL = 'https://github.com/h-kanazawa/react-detectable-overflow/tree/master/demo/src/App.js';\n\nconst SampleComponent = () => {\n const [value, setValue] = useState('short a a a a a a ');\n\n return (\n setValue(overflow ? 'short' : 'loooooooooooooooooooooooooooooooooooooong')}\n style={{ width: '120px' }}\n >\n a {value}\n \n );\n};\n\n// Demo using useOverflowDetector hook\nconst HookDemo = ({ input, width }) => {\n const onChangeOverflow = useCallback((overflow) => {\n console.log(`useOverflowDetector onChange(${overflow}) is called`);\n }, []);\n\n const { overflow, ref } = useOverflowDetector({\n onChange: onChangeOverflow,\n });\n\n return (\n <>\n \n \n \n {input}\n \n \n );\n};\n\n// Demo using DetectableOverflow component\nconst ClassicClassDemo = ({ input, width }) => {\n const [overflow, setOverflow] = useState(false);\n\n return (\n <>\n \n \n \n {input}\n \n \n );\n};\n\nconst App = () => {\n const [input, updateInput] = useState('');\n const [width, updateWidth] = useState('');\n\n return (\n \n \n React Detectable Overflow
\n \n \n
\n This is a demo of react-detectable-overflow. Try changing the input text, the width, and\n browser's window size. You can see this page's source code here.\n
\n\n
\n
updateInput(e.target.value)}\n />\n\n \n \n \n \n\n \n\n \n\n \n ,\n options: ResizeDetectorProps = {}\n) {\n class ResizeDetectorHOC extends Component<\n PropsWithoutResizeDetectorDimensions & { forwardedRef: ForwardedRef }\n > {\n ref = createRef();\n\n render() {\n const { forwardedRef, ...rest } = this.props;\n const targetRef = forwardedRef ?? this.ref;\n\n return (\n }>\n \n \n );\n }\n }\n\n function forwardRefWrapper(props: PropsWithoutResizeDetectorDimensions, ref: ForwardedRef) {\n return ;\n }\n\n const name = ComponentInner.displayName || ComponentInner.name;\n forwardRefWrapper.displayName = `withResizeDetector(${name})`;\n\n return forwardRef(forwardRefWrapper);\n}\n\n// Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types\n// https://github.com/Microsoft/TypeScript/issues/28339\ntype PropsWithoutResizeDetectorDimensions = Without, 'width'>, 'height'>;\ntype Without = Key extends keyof T ? Omit : T;\ntype OptionalKey = Key extends keyof T ? Omit & { [K in Key]?: T[K] } : T;\n\nexport default withResizeDetector;\n","import { useLayoutEffect, useEffect, useState, useRef } from 'react';\nimport type { MutableRefObject } from 'react';\nimport type { DebouncedFunc } from 'lodash';\n\nimport { patchResizeHandler, createNotifier, isSSR } from './utils';\n\nimport type { PatchedResizeObserverCallback } from './utils';\nimport type { Props, ReactResizeDetectorDimensions } from './ResizeDetector';\n\nconst useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;\n\nexport interface useResizeDetectorProps extends Props {\n targetRef?: MutableRefObject;\n}\n\nfunction useResizeDetector(props: useResizeDetectorProps = {}): UseResizeDetectorReturn {\n const {\n skipOnMount = false,\n refreshMode,\n refreshRate = 1000,\n refreshOptions,\n handleWidth = true,\n handleHeight = true,\n targetRef,\n observerOptions,\n onResize\n } = props;\n\n const skipResize = useRef(skipOnMount);\n const localRef = useRef(null);\n const resizeHandler = useRef();\n\n const ref = targetRef ?? localRef;\n\n const [size, setSize] = useState({\n width: undefined,\n height: undefined\n });\n\n useEnhancedEffect(() => {\n if (!handleWidth && !handleHeight) return;\n\n const notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);\n\n const resizeCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {\n if (!handleWidth && !handleHeight) return;\n\n entries.forEach(entry => {\n const { width, height } = (entry && entry.contentRect) || {};\n\n const shouldSetSize = !skipResize.current;\n if (shouldSetSize) {\n notifyResize({ width, height });\n }\n\n skipResize.current = false;\n });\n };\n\n resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);\n\n const resizeObserver = new window.ResizeObserver(resizeHandler.current);\n\n if (ref.current) {\n resizeObserver.observe(ref.current, observerOptions);\n }\n\n return () => {\n resizeObserver.disconnect();\n (resizeHandler.current as DebouncedFunc).cancel?.();\n };\n }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);\n\n return { ref, ...size };\n}\n\nexport default useResizeDetector;\n\nexport interface UseResizeDetectorReturn extends ReactResizeDetectorDimensions {\n ref: MutableRefObject;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React, { useCallback, useState } from 'react';\nimport { default as DetectableOverflow, useOverflowDetector } from 'react-detectable-overflow';\nimport './App.css';\n\nconst repoURL = 'https://github.com/h-kanazawa/react-detectable-overflow';\nconst demoURL = 'https://github.com/h-kanazawa/react-detectable-overflow/tree/master/demo/src/App.js';\n\n// Demo using useOverflowDetector hook\nconst HookDemo = ({ input, width }) => {\n const onChangeOverflow = useCallback((overflow) => {\n console.log(`useOverflowDetector onChange(${overflow}) is called`);\n }, []);\n\n const { overflow, ref } = useOverflowDetector({\n onChange: onChangeOverflow,\n });\n\n return (\n <>\n \n \n \n {input}\n \n \n );\n};\n\n// Demo using DetectableOverflow component\nconst ClassicClassDemo = ({ input, width }) => {\n const [overflow, setOverflow] = useState(false);\n\n return (\n <>\n \n \n \n {input}\n \n \n );\n};\n\nconst App = () => {\n const [input, updateInput] = useState('');\n const [width, updateWidth] = useState('');\n\n return (\n \n \n React Detectable Overflow
\n \n \n
\n This is a demo of react-detectable-overflow. Try changing the input text, the width, and\n browser's window size. You can see this page's source code here.\n
\n\n
\n
updateInput(e.target.value)}\n />\n\n \n \n \n \n\n \n\n \n