How to use @react-hook/window-size - 3 common examples
To help you get started, we’ve selected a few @react-hook/window-size examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jaredLunde / masonic / src / index.tsx View on Github 
export const useWindowScroller = (
initialWidth: number,
initialHeight: number,
options: WindowScrollerOptions = emptyObj
): WindowScrollerResult => {
const fps = options.scroll?.fps || 8
const scrollY = useWindowScroll(fps)
const [width, height] = useWindowSize(
initialWidth,
initialHeight,
options.size || defaultSizeOpt
)
const [isScrolling, setIsScrolling] = useState(false)
const isScrollingTimeout = useRef()
useLayoutEffect(() => {
if (isScrollingTimeout.current !== null) {
clearTimeout(isScrollingTimeout.current)
isScrollingTimeout.current = void 0
}
setIsScrolling(true)
isScrollingTimeout.current = window.setTimeout(() => {
// This is here to prevent premature bail outs while maintaining high resolutionexport default (initialWidth, initialHeight, opt = emptyObj) => {
const fps = opt.scroll?.fps || defaultScrollFps
const scrollY = useWindowScroll(fps)
const [width, height] = useWindowSize(
initialWidth,
initialHeight,
opt.size || defaultSizeOpt
)
const [isScrolling, setIsScrolling] = useState(false)
const isScrollingTimeout = useRef(null)
useLayoutEffect(() => {
if (isScrollingTimeout.current !== null) {
clearTimeout(isScrollingTimeout.current)
isScrollingTimeout.current = null
}
setIsScrolling(true)
isScrollingTimeout.current = setTimeout(() => {
// This is here to prevent premature bail outs while maintaining high resolution@view() FullHeight({...props}) {
const height = useWindowHeight(600);
return <div>;
}
</div>@react-hook/window-size
React hooks for updating components when the size of the `window` changes.
