useVhProperty

In iOS web environments, the address bar height causes 100vh to be measured larger than the actual visible screen height.

To address this, the useVhProperty hook allows you to set a CSS variable so that 100vh is calculated as the actual screen height.

In general, resize events on iOS only occur when switching between portrait and landscape orientation. However, by using the enableResize option, the CSS variable can be recalculated every time a resize event fires, even on iOS.

Code

🔗 View source code

Interface

typescript

interface UseVhPropertyProps {
  name?: string;
  enableResize?: boolean;
}

const useVhProperty: ({ name, enableResize }?: UseVhPropertyProps) => void;

Options

Name	Type	Default	Description
name	string	'vh'	CSS variable name (set as --{name})
enableResize	boolean	false	Whether to recalculate the CSS variable on resize events

Usage

typescript

import { useVhProperty } from '@modern-kit/react';

const Example = () => {
  useVhProperty();
  // Resize: useVhProperty({ enableResize: true });

  const style: CSSProperties = useMemo(() => {
    return {
      height: 'calc(var(--vh, 1vh) * 100)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'purple',
      fontSize: '2rem',
      color: '#fff',
    }
  }, []);

  return (
    <div style={style}>
      <p>Configures 100vh to be calculated as the actual screen height.</p>
    </div>
  );
};

Example

Configures 100vh to be calculated as the actual screen height.