Vev Help Center
Search…
useViewport hook
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

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

Example

1
import { useViewport } from 'vev';
2
​
3
export default function({ text }: Props) {
4
const [count, setCount] = useState<number>(0);
5
const viewport = useViewport()
6
const { disabled } = useEditorState();
7
​
8
function test(){
9
console.log("viewport: ", viewport);
10
}
11
12
return (
13
<div className='fill wrapper' onClick={test}>
14
<h1>Width: {viewport.width}</h1>
15
<h1>Height: {viewport.width}</h1>
16
<h1>ScrollHeight: {viewport.scrollHeight}</h1>
17
</div>
18
);
19
}
Copied!
Copy link
Contents
Usage
Example