‚̧Negotiate Pushing Milestone
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    @charlietango/use-window-size
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    useWindowSize

    Get the width and height of the viewport.

    Checkout the Storybook demo.

    Installation

    yarn add @charlietango/use-window-size

    API

    const { width, height } = useWindowSize()

    By default, the value is lazy to support SSR, so the width and height will always be 0 on the initial render. Subsequent users of the hook will return the size during the first render.

    Example

    import React from 'react'
    import useWindowSize from '@charlietango/use-window-size'
     
    const Component = () => {
      const { width, height } = useWindowSize()
     
      return (
        <div>
          {width}x{height}px
        </div>
      )
    }
     
    export default Component

    Keywords

    Install

    npm i @charlietango/use-window-size

    DownloadsWeekly Downloads

    435

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    8.54 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar