@os-design/use-vh 1.0.19 → 1.0.21

package/dist/cjs/index.js

@@ -17,6 +17,5 @@ var useVh = function useVh() {
   }, [resizeListener]);
   (0, _useEvent["default"])(typeof window !== 'undefined' ? window : undefined, 'resize', resizeListener);
 };
-var _default = useVh;
-exports["default"] = _default;
+var _default = exports["default"] = useVh;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_react","obj","__esModule","useVh","resizeListener","useCallback","vh","window","innerHeight","document","documentElement","style","setProperty","concat","useEffect","useEvent","undefined","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { useCallback, useEffect } from 'react';\n\nconst useVh = (): void => {\n  const resizeListener = useCallback(() => {\n    const vh = window.innerHeight * 0.01;\n    document.documentElement.style.setProperty('--vh', `${vh}px`);\n  }, []);\n\n  useEffect(() => resizeListener(), [resizeListener]);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    resizeListener\n  );\n};\n\nexport default useVh;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA+C,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAE/C,IAAME,KAAK,GAAG,SAARA,KAAKA,CAAA,EAAe;EACxB,IAAMC,cAAc,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACvC,IAAMC,EAAE,GAAGC,MAAM,CAACC,WAAW,GAAG,IAAI;IACpCC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,WAAW,CAAC,MAAM,KAAAC,MAAA,CAAKP,EAAE,OAAI,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAQ,gBAAS,EAAC;IAAA,OAAMV,cAAc,CAAC,CAAC;EAAA,GAAE,CAACA,cAAc,CAAC,CAAC;EACnD,IAAAW,oBAAQ,EACL,OAAOR,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGS,SAAS,EACnD,QAAQ,EACRZ,cACF,CAAC;AACH,CAAC;AAAC,IAAAa,QAAA,GAEad,KAAK;AAAAe,OAAA,cAAAD,QAAA"}
+{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_react","obj","__esModule","useVh","resizeListener","useCallback","vh","window","innerHeight","document","documentElement","style","setProperty","concat","useEffect","useEvent","undefined","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { useCallback, useEffect } from 'react';\n\nconst useVh = (): void => {\n  const resizeListener = useCallback(() => {\n    const vh = window.innerHeight * 0.01;\n    document.documentElement.style.setProperty('--vh', `${vh}px`);\n  }, []);\n\n  useEffect(() => resizeListener(), [resizeListener]);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    resizeListener\n  );\n};\n\nexport default useVh;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA+C,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAE/C,IAAME,KAAK,GAAG,SAARA,KAAKA,CAAA,EAAe;EACxB,IAAMC,cAAc,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACvC,IAAMC,EAAE,GAAGC,MAAM,CAACC,WAAW,GAAG,IAAI;IACpCC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,WAAW,CAAC,MAAM,KAAAC,MAAA,CAAKP,EAAE,OAAI,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAQ,gBAAS,EAAC;IAAA,OAAMV,cAAc,CAAC,CAAC;EAAA,GAAE,CAACA,cAAc,CAAC,CAAC;EACnD,IAAAW,oBAAQ,EACL,OAAOR,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGS,SAAS,EACnD,QAAQ,EACRZ,cACF,CAAC;AACH,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,cAEaf,KAAK","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEvent","useCallback","useEffect","useVh","resizeListener","vh","window","innerHeight","document","documentElement","style","setProperty","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { useCallback, useEffect } from 'react';\n\nconst useVh = (): void => {\n  const resizeListener = useCallback(() => {\n    const vh = window.innerHeight * 0.01;\n    document.documentElement.style.setProperty('--vh', `${vh}px`);\n  }, []);\n\n  useEffect(() => resizeListener(), [resizeListener]);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    resizeListener\n  );\n};\n\nexport default useVh;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAE9C,MAAMC,KAAK,GAAGA,CAAA,KAAY;EACxB,MAAMC,cAAc,GAAGH,WAAW,CAAC,MAAM;IACvC,MAAMI,EAAE,GAAGC,MAAM,CAACC,WAAW,GAAG,IAAI;IACpCC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,WAAW,CAAC,MAAM,EAAG,GAAEN,EAAG,IAAG,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;EAENH,SAAS,CAAC,MAAME,cAAc,CAAC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EACnDJ,QAAQ,CACL,OAAOM,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGM,SAAS,EACnD,QAAQ,EACRR,cACF,CAAC;AACH,CAAC;AAED,eAAeD,KAAK"}
+{"version":3,"file":"index.js","names":["useEvent","useCallback","useEffect","useVh","resizeListener","vh","window","innerHeight","document","documentElement","style","setProperty","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport { useCallback, useEffect } from 'react';\n\nconst useVh = (): void => {\n  const resizeListener = useCallback(() => {\n    const vh = window.innerHeight * 0.01;\n    document.documentElement.style.setProperty('--vh', `${vh}px`);\n  }, []);\n\n  useEffect(() => resizeListener(), [resizeListener]);\n  useEvent(\n    (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n    'resize',\n    resizeListener\n  );\n};\n\nexport default useVh;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,WAAW,EAAEC,SAAS,QAAQ,OAAO;AAE9C,MAAMC,KAAK,GAAGA,CAAA,KAAY;EACxB,MAAMC,cAAc,GAAGH,WAAW,CAAC,MAAM;IACvC,MAAMI,EAAE,GAAGC,MAAM,CAACC,WAAW,GAAG,IAAI;IACpCC,QAAQ,CAACC,eAAe,CAACC,KAAK,CAACC,WAAW,CAAC,MAAM,EAAG,GAAEN,EAAG,IAAG,CAAC;EAC/D,CAAC,EAAE,EAAE,CAAC;EAENH,SAAS,CAAC,MAAME,cAAc,CAAC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EACnDJ,QAAQ,CACL,OAAOM,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGM,SAAS,EACnD,QAAQ,EACRR,cACF,CAAC;AACH,CAAC;AAED,eAAeD,KAAK","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-vh",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -23,17 +23,17 @@
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "build": "yarn clean && npm-run-all build:*",
+    "build": "yarn clean && npm-run-all 'build:*'",
     "ncu": "ncu -u"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.18"
+    "@os-design/use-event": "^1.0.20"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "f838bd8885cdaf45e62a3b61fa2f83f2d2036e09"
+  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
 }

package/src/index.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Utils/useVh' />
+
+# useVh
+
+Sets the --vh css variable.
+
+## Example of usage
+
+Add `useVh()` to the entry point of your application to set the `--vh` css variable.
+
+You can use this variable in css like this:
+
+```
+height: calc(var(--vh, 1vh) * 100);
+```
+
+For more information about why this is necessary, see [this article](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/).