{"id":8258,"date":"2024-02-09T11:47:03","date_gmt":"2024-02-09T10:47:03","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=8258"},"modified":"2024-02-09T11:47:05","modified_gmt":"2024-02-09T10:47:05","slug":"react-autoscroll","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-autoscroll\/","title":{"rendered":"React AutoScroll"},"content":{"rendered":"\n<p>Component that prevents the parent from growing, applying scrollbars.<\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">export interface IRect {\r\n    width: number,\r\n    height: number;\r\n}\r\n\r\nexport function ParentSize(props: { children?: ReactNode; sizeChanged: (size: IRect) => any; minHeight?: number | string }) {\r\n    const { sizeChanged, minHeight } = props;\r\n    const ref = useRef&lt;HTMLDivElement>(null);\r\n    useEffect(() => {\r\n        const element = ref.current;\r\n        if (!element)\r\n            return;\r\n        const onSizeChanged = () => {\r\n            if (element) {\r\n                const rect = element.getBoundingClientRect();\r\n                sizeChanged(rect);\r\n            }\r\n        };\r\n\r\n        const observer = new (window as any).ResizeObserver(onSizeChanged);\r\n        observer.observe(element);\r\n        return () => observer.unobserve(element);\r\n    }, [sizeChanged, ref]);\r\n\r\n    const parentStyle: CSSProperties = {\r\n        position: \"relative\",\r\n        display: \"block\",\r\n        overflow: \"hidden\",\r\n        width: \"100%\",\r\n        height: \"100%\",\r\n        minHeight: minHeight\r\n    };\r\n\r\n    const childStyle: CSSProperties = {\r\n        position: \"absolute\",\r\n        overflow: \"hidden\",\r\n        width: \"100%\",\r\n        height: \"100%\"\r\n    };\r\n\r\n    return &lt;div style={parentStyle} ref={ref}>\r\n        &lt;div style={childStyle} >\r\n            {props.children}\r\n        &lt;\/div>\r\n    &lt;\/div>;\r\n}\r\n\r\n\r\nexport function AutoScroll(props: { children: any; onSizeChange?: (size: IRect) => any }) {\r\n    const { onSizeChange } = props;\r\n    const [size, setSize] = useState&lt;IRect>({ width: 0, height: 0 });\r\n\r\n    function sizeChanged(s: IRect) {\r\n        setSize(s);\r\n        if (onSizeChange)\r\n            onSizeChange(s);\r\n    }\r\n\r\n    return (&lt;ParentSize sizeChanged={sizeChanged}>\r\n        &lt;div style={{ display: \"grid\", height: size.height, width: size.width, overflow: \"auto\" }}>\r\n            {props.children}\r\n        &lt;\/div>\r\n    &lt;\/ParentSize>);\r\n}\r\n\r\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Component that prevents the parent from growing, applying scrollbars.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8258","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=8258"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8258\/revisions"}],"predecessor-version":[{"id":8259,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8258\/revisions\/8259"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=8258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=8258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=8258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}