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>
);
}