To help you get started, we've collected the most common ways that @react-hook/window-size is being used within popular public projects.

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 resolution

View more ways to use @react-hook/window-size

npm i @react-hook/window-size

React hooks for updating components when the size or orientation of the window changes. These hooks come in two forms: debounced using useDebounce() and throttled using useThrottle().

Quick Start

Check out the example on CodeSandbox

//
// Debounced values
import {
  useWindowSize,
  useWindowWidth,
  useWindowHeight,
} from '@react-hook/window-size'

const Component = (props) => {
  const [width, height] = useWindowSize()
  const onlyWidth = useWindowWidth()
  const onlyHeight = useWindowHeight()
}

//
// Throttled values
import {
  useWindowSize,
  useWindowWidth,
  useWindowHeight,
} from '@react-hook/window-size/throttled'

const Component = (props) => {
  const [width, height] = useWindowSize()
  const onlyWidth = useWindowWidth()
  const onlyHeight = useWindowHeight()
}

API

useWindowSize(options?): [number, number]

A hook that returns the current width and height of the window. This hook is debounced, meaning it will wait (100ms by default) for the resize events to stop firing before it actually updates its state with the new width and height.

Options

DebouncedWindowSizeOptions

Returns [width: number, height: number]

useWindowWidth(options?): number

A hook that returns the current width of the window. This hook is debounced, meaning it will wait (100ms by default) for the resize events to stop firing before it actually updates its state with the new width.

Options

DebouncedWindowSizeOptions

Returns width: number

useWindowHeight(options?): number

A hook that returns the current height of the window. This hook is debounced, meaning it will wait (100ms by default) for the resize events to stop firing before it actually updates its state with the new height.

Options

DebouncedWindowSizeOptions

Returns height: number

Throttled API

To use these throttled hooks instead of debounced hooks, import with import {...} from '@react-hook/window-size/throttled

useWindowSize(options?): [number, number]

A hook that returns the current width and height of the window. This hook is throttled, meaning it will only update its state at most 30fps (by default, configuration below) with the new width and height of the window. It will always update at the trailing edge, so you don't have to worry about not having the correct width or height after the window is finished resizing. It will also update at the leading edge if configured to do so.

Options

ThrottledWindowSizeOptions

Returns [width: number, height: number]

useWindowWidth(options?): number

A hook that returns the current width of the window. This hook is throttled, meaning it will only update its state at most 30fps (by default, configuration below) with the new width of the window. It will always update at the trailing edge, so you don't have to worry about not having the correct width after the window is finished resizing. It will also update at the leading edge if configured to do so.

Options

ThrottledWindowSizeOptions

Returns width: number

useWindowHeight(options?): number

A hook that returns the current height of the window. This hook is throttled, meaning it will only update its state at most 30fps (by default, configuration below) with the new height of the window. It will always update at the trailing edge, so you don't have to worry about not having the correct height after the window is finished resizing. It will also update at the leading edge if configured to do so.

Options

ThrottledWindowSizeOptions

Returns height: number

LICENSE

MIT