✨ feat(utils): add viewport utils

src/components/utils/viewport/ViewportProvider.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import viewportContext from './viewportContext'
+
+const ViewportProvider = (props: { children: React.ReactNode }) => {
+  const [width, setWidth] = React.useState(window.innerWidth)
+  const [height, setHeight] = React.useState(window.innerHeight)
+  const handleWindowResize = () => {
+    setWidth(window.innerWidth)
+    setHeight(window.innerHeight)
+  }
+
+  React.useEffect(() => {
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
+
+  return <viewportContext.Provider value={{ width, height }}>{props.children}</viewportContext.Provider>
+}
+
+export default ViewportProvider

src/components/utils/viewport/index.ts

@@ -0,0 +1,3 @@
+export { default as viewportContext } from './viewportContext'
+export { default as ViewportProvider } from './ViewportProvider'
+export { default as useViewport } from './useViewport'

src/components/utils/viewport/useViewport.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import viewportContext from './viewportContext'
+
+const useViewport = () => {
+  const { width, height } = React.useContext(viewportContext)
+  return { width, height }
+}
+
+export default useViewport

src/components/utils/viewport/viewportContext.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+type Viewport = { width: number; height: number }
+const viewportContext = React.createContext<Viewport>({ width: window.innerWidth, height: window.innerHeight })
+
+export default viewportContext