Skip to main content
useViewport Hook
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Watches and returns the viewport width, height, and scrollHeight. The viewport is the user's visible area of a webpage and can vary based on device sizes.

Usage

const {width, height, scrollHeight} = useViewport();

Example

import { useViewport } from 'vev';

export default function({ text }: Props) {
const [count, setCount] = useState<number>(0);
const viewport = useViewport()
const { disabled } = useEditorState();

function test(){
console.log("viewport: ", viewport);
}

return (
<div className='fill wrapper' onClick={test}>
<h1>Width: {viewport.width}</h1>
<h1>Height: {viewport.width}</h1>
<h1>ScrollHeight: {viewport.scrollHeight}</h1>
</div>
);
}

Did this answer your question?