Have ideas to improve npm?Join in the discussion! »

    viewport-details
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Viewport details

    Get viewport details

    GitHub release Build Status codecov Codacy Badge

    Install

    You can install via npm or yarn

    npm

    npm install --save viewport-details

    yarn

    yarn add viewport-details

    Usage

    Importing

    You can import using ES6 imports

    import { getViewportDetails } from 'viewport-details';

    Getting details

    console.log(getViewportDetails());

    Will return:

    interface ViewportDetails {
      /**
       * The width of the viewport
       */
      width: number;
    
      /**
       * The height of the viewport
       */
      height: number;
    
      /**
       * The hight of the viewport if the browser controlls have collapsed (e.g. in iOS Safari)
       */
      heightCollapsedControls: number;
    
      /**
       * The scroll x position of the viewport
       */
      scrollX: number;
    
      /**
       * The scroll y position of the viewport
       */
      scrollY: number;
    
      /**
       * Whether the viewport has resized since the last time getViewportDetails was called
       */
      resized: boolean;
    
      /**
       * Whether the viewport scrolled since the last time getViewportDetails was called
       */
      scrolled: boolean;
    
      /**
       * The direction in which the user is scrolling on the x axis
       */
      scrollDirectionX: ScrollDirectionX;
    
      /**
       * The direction in which the user is scrolling on the y axis
       */
      scrollDirectionY: ScrollDirectionY;
    
      /**
       * The previous getViewportDetails result
       */
      previous?: ViewportDetails;
    
      /**
       * Whether any of the values have changes since the last time getViewport details was called
       */
      changed?: boolean;
    }

    Note

    heightCollapsedControls is the height that the viewport will be once the user has scrolled and the browser controlls shrink, such as on iOS Safari.

    resized represents whether the viewport resized since the previous animation frame.

    scrolled represents whether the viewport scrolled since the previous animation frame.

    scrollDirectionX represents a the direction of scroll. 0 means no movement, 1 means scrolling to the right, and -1 means scrolling to the left.

    If you're using TypeScript an enum (ScrollDirectionX) is also available, with the options None, Right, and Left.

    scrollDirectionY represents a the direction of scroll. 0 means no movement, 1 means scrolling down, and -1 means scrolling up.

    If you're using TypeScript an enum (ScrollDirectionY) is also available, with the options None, Up, and Down.

    Install

    npm i viewport-details

    DownloadsWeekly Downloads

    138

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar