Height: {wrapperHeight}
\n \n\n {blocks.map((block, index) => (\n \n Block height: {block}\n
\n \n
\n ))}\n \n \n );\n}\n```\n\n# Observed Size Hook\n\nThis hook built on top of [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)\nand uses `useResizeObserver` hook inside to automate getting `size` of specified element.\nOptionally, you can path `deboubceMs` argument to hook, it will slowdown changing `size` value if needed, but not\neffects on visual element size changing. Could be useful to prevent expensive re-rendering.\n\n\n```javascript\n...\n\nimport { useResizeObserver } from '@1px.one/react-hooks';\n\nfunction SomeComponent() {\n const [ref, size] = useObservedSize\n \n
Height: {size.heigth}
\n \n\n {blocks.map((block, index) => (\n \n Block height: {block}\n
\n \n
\n ))}\n \n \n );\n}\n\n```\n\n# Fullscreen Hook\n\n```javascript\n...\n\nimport { useFullScreen } from '@1px.one/react-hooks';\n\nfunction SomeComponent() {\n const playerElement = useRef\n \n
This is autoclosing notification
;\n }\n return null;\n}\n```\n\n# Debug Hook\nThis hook will show in console difference between props on each render.\nIt helps to debug complicated components.\nThis hook supports nested objects compare. Use it only in development mode.\n\n```javascript\n...\n\nimport { useWhyDidYouUpdate } from '@1px.one/react-hooks';\n\nfunction SomeComponent(props) {\n \n\n useWhyDidYouUpdate(props, 'my complicated component to debug');\n\n // also you can specify console prefix to identify current hook usage\n\n // For example if props.name changed it will log:\n // [why-did-you-update] my complicated component to debug {name: { from: 'Jim', to: 'Joe' }}\n\n return <>...;\n}\n```\n\n### TODO\n* Add SSR support\n* Add demo\n* Tests\n* Add useAccelerometer\n* Add useParallax\n","readmeFilename":"README.md"}