@graphcommerce/framer-utils 3.0.5 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.1.0
+
+### Minor Changes
+
+- [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Add a clientSizeCssVar that will change when the viewport changes size, as a better alternative for 100vh and in preparation for 100dvh
+
 ## 3.0.5
 
 ### Patch Changes

package/hooks/useClientSize.ts

@@ -2,10 +2,40 @@ import { motionValue, MotionValue } from 'framer-motion'
 import { useEffect } from 'react'
 import { clientSize } from '../utils/clientSize'
 import { useConstant } from './useConstant'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 export type UseClientSizeReturn = { x: MotionValue<string>; y: MotionValue<string> }
 export type UseClientSizeOptions = { x?: string; y?: string }
 
+export const clientSizeCssVar = {
+  y: `var(--client-size-y, 100vh)`,
+  x: `var(--client-size-x, 100vh)`,
+}
+
+let watching = false
+
+export function useClientSizeCssVar() {
+  useIsomorphicLayoutEffect(() => {
+    if (watching === true) return () => {}
+
+    const recalc = () => {
+      if (typeof window !== 'undefined') {
+        const { x, y } = clientSize
+        document.body.style.setProperty('--client-size-x', `${x.get()}px`)
+        document.body.style.setProperty('--client-size-y', `${y.get()}px`)
+      }
+    }
+    recalc()
+    watching = true
+    const reset = clientSize.y.onChange(recalc)
+
+    return () => {
+      watching = false
+      reset()
+    }
+  }, [])
+}
+
 /**
  * Get the clientSize x|y as a motionValue
  *

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-utils",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.5",
+  "version": "3.1.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,7 +15,7 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.2",
     "@graphcommerce/prettier-config-pwa": "^4.0.3",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.19.2"