✨ Add ResponsivenessContext and useResponsiveness hook ✨

src/context/responsiveness/index.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useEffect, useMemo, useState } from 'react'
+
+interface ResponsivenessContextProps {
+  isMobile: boolean
+}
+
+interface ResponsivenessProviderProps {
+  children: React.ReactNode
+}
+
+const ResponsivenessContext = createContext({} as ResponsivenessContextProps)
+
+function ResponsivenessProvider({
+  children,
+}: Readonly<ResponsivenessProviderProps>) {
+  const [currentBrowserWidth, setCurrentBrowserWidth] = useState(0)
+  const isMobile = currentBrowserWidth < 640
+
+  function onUpdateCurrentBrowserWidth() {
+    setCurrentBrowserWidth(window.innerWidth)
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', onUpdateCurrentBrowserWidth)
+    return () => {
+      window.removeEventListener('resize', onUpdateCurrentBrowserWidth)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const contextValue = useMemo(() => ({ isMobile }), [isMobile])
+
+  return (
+    <ResponsivenessContext.Provider value={contextValue}>
+      {children}
+    </ResponsivenessContext.Provider>
+  )
+}
+
+export { ResponsivenessProvider, ResponsivenessContext }

src/hook/useResponsiveness.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react'
+import { ResponsivenessContext } from '../context/responsiveness'
+
+export function useResponsiveness() {
+  const context = useContext(ResponsivenessContext)
+
+  if (!context) {
+    throw new Error(
+      'useResponsiveness must be used within a ResponsivenessProvider',
+    )
+  }
+  return context
+}