From 18899462d453c60d035d98a1a415d53c8e7d5666 Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Fri, 18 Oct 2024 22:39:58 +0530 Subject: [PATCH] feat: user viewport dimension context --- src/context/userViewportDimensions.tsx | 38 ++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/context/userViewportDimensions.tsx diff --git a/src/context/userViewportDimensions.tsx b/src/context/userViewportDimensions.tsx new file mode 100644 index 00000000..22b5e129 --- /dev/null +++ b/src/context/userViewportDimensions.tsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from 'react'; + +interface Dimensions { + width: number; + height: number; +} + +const UserViewportDimensions: React.FC = () => { + const [dimensions, setDimensions] = useState({ + 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 ( +
+

User Viewport Dimensions

+

Width: {dimensions.width}px

+

Height: {dimensions.height}px

+
+ ); +}; + +export default UserViewportDimensions;