39 lines
797 B
TypeScript
39 lines
797 B
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
interface Dimensions {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
const UserViewportDimensions: React.FC = () => {
|
|
const [dimensions, setDimensions] = useState<Dimensions>({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
|
|
const handleResize = () => {
|
|
setDimensions({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1>User Viewport Dimensions</h1>
|
|
<p>Width: {dimensions.width}px</p>
|
|
<p>Height: {dimensions.height}px</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserViewportDimensions;
|