@os-design/use-vh 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.mdx +19 -0
package/dist/cjs/index.js
CHANGED
|
@@ -17,6 +17,5 @@ var useVh = function useVh() {
|
|
|
17
17
|
}, [resizeListener]);
|
|
18
18
|
(0, _useEvent["default"])(typeof window !== 'undefined' ? window : undefined, 'resize', resizeListener);
|
|
19
19
|
};
|
|
20
|
-
var _default = useVh;
|
|
21
|
-
exports["default"] = _default;
|
|
20
|
+
var _default = exports["default"] = useVh;
|
|
22
21
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +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,
|
|
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,GAAAC,OAAA,cAEaf,KAAK","ignoreList":[]}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +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"}
|
|
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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/use-vh",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@os-design/use-event": "^1.0.
|
|
33
|
+
"@os-design/use-event": "^1.0.21"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=18"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "6c92e27c799cae9ae9930e734868d8da35c61cb6"
|
|
39
39
|
}
|
package/src/index.mdx
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
<Meta title='Utils/useVh' />
|
|
4
|
+
|
|
5
|
+
# useVh
|
|
6
|
+
|
|
7
|
+
Sets the --vh css variable.
|
|
8
|
+
|
|
9
|
+
## Example of usage
|
|
10
|
+
|
|
11
|
+
Add `useVh()` to the entry point of your application to set the `--vh` css variable.
|
|
12
|
+
|
|
13
|
+
You can use this variable in css like this:
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
height: calc(var(--vh, 1vh) * 100);
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
For more information about why this is necessary, see [this article](https://css-tricks.com/the-trick-to-viewport-units-on-mobile/).
|