@os-design/use-safe-area-inset 1.0.21 → 1.0.23
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 +7 -8
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +5 -5
- package/src/index.mdx +32 -0
package/dist/cjs/index.js
CHANGED
|
@@ -8,18 +8,18 @@ var _useBrowserLayoutEffect = _interopRequireDefault(require("@os-design/use-bro
|
|
|
8
8
|
var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
-
function _typeof(
|
|
11
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
12
12
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
13
13
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
14
14
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
15
15
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
16
|
-
function _iterableToArrayLimit(
|
|
16
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
17
17
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
18
|
-
function ownKeys(
|
|
19
|
-
function _objectSpread(
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
20
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
21
|
-
function _toPropertyKey(
|
|
22
|
-
function _toPrimitive(
|
|
21
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
22
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
23
23
|
var computeSafeAreaInset = function computeSafeAreaInset() {
|
|
24
24
|
var res = {
|
|
25
25
|
top: 0,
|
|
@@ -63,6 +63,5 @@ var useSafeAreaInset = function useSafeAreaInset() {
|
|
|
63
63
|
(0, _useEvent["default"])(typeof window !== 'undefined' ? window : undefined, 'scroll', updateSafeAreaInset);
|
|
64
64
|
return safeAreaInset;
|
|
65
65
|
};
|
|
66
|
-
var _default = useSafeAreaInset;
|
|
67
|
-
exports["default"] = _default;
|
|
66
|
+
var _default = exports["default"] = useSafeAreaInset;
|
|
68
67
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_useEvent","_react","obj","__esModule","_typeof","Symbol","iterator","constructor","prototype","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_useEvent","_react","obj","__esModule","_typeof","o","Symbol","iterator","constructor","prototype","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","minLen","_arrayLikeToArray","n","Object","toString","call","slice","name","Array","from","test","len","length","arr2","r","l","t","e","u","a","f","next","done","push","value","isArray","ownKeys","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","apply","_objectSpread","arguments","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","key","_toPropertyKey","configurable","writable","_toPrimitive","toPrimitive","String","Number","computeSafeAreaInset","res","top","right","bottom","left","reduce","acc","cur","style","getComputedStyle","document","documentElement","getPropertyValue","concat","parseFloat","useSafeAreaInset","_useState","useState","_useState2","safeAreaInset","setSafeAreaInset","updateSafeAreaInset","useCallback","nextSafeAreaInset","JSON","stringify","updateSafeAreaInsetRef","useRef","useEffect","current","useBrowserLayoutEffect","item","setProperty","useEvent","window","undefined","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport useEvent from '@os-design/use-event';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseSafeAreaInsetRes {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\nconst computeSafeAreaInset = () => {\n const res = { top: 0, right: 0, bottom: 0, left: 0 };\n // Get css properties\n return Object.keys(res).reduce<UseSafeAreaInsetRes>((acc, cur) => {\n const style = getComputedStyle(document.documentElement).getPropertyValue(\n `--safe-area-inset-${cur}`\n );\n return { ...acc, [cur]: parseFloat(style) || 0 };\n }, res);\n};\n\nconst useSafeAreaInset = (): UseSafeAreaInsetRes => {\n const [safeAreaInset, setSafeAreaInset] = useState<UseSafeAreaInsetRes>({\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n });\n\n const updateSafeAreaInset = useCallback(() => {\n const nextSafeAreaInset = computeSafeAreaInset();\n if (JSON.stringify(safeAreaInset) === JSON.stringify(nextSafeAreaInset))\n return;\n setSafeAreaInset(nextSafeAreaInset);\n }, [safeAreaInset]);\n\n const updateSafeAreaInsetRef = useRef(updateSafeAreaInset);\n useEffect(() => {\n updateSafeAreaInsetRef.current = updateSafeAreaInset;\n }, [updateSafeAreaInset]);\n\n useBrowserLayoutEffect(() => {\n // Set css properties\n ['top', 'right', 'bottom', 'left'].forEach((item) => {\n document.documentElement.style.setProperty(\n `--safe-area-inset-${item}`,\n `env(safe-area-inset-${item})`\n );\n });\n // Update initial values\n updateSafeAreaInsetRef.current();\n }, []);\n\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'scroll',\n updateSafeAreaInset\n );\n\n return safeAreaInset;\n};\n\nexport default useSafeAreaInset;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEvent","useCallback","useEffect","useRef","useState","computeSafeAreaInset","res","top","right","bottom","left","Object","keys","reduce","acc","cur","style","getComputedStyle","document","documentElement","getPropertyValue","parseFloat","useSafeAreaInset","safeAreaInset","setSafeAreaInset","updateSafeAreaInset","nextSafeAreaInset","JSON","stringify","updateSafeAreaInsetRef","current","forEach","item","setProperty","window","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport useEvent from '@os-design/use-event';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseSafeAreaInsetRes {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\nconst computeSafeAreaInset = () => {\n const res = { top: 0, right: 0, bottom: 0, left: 0 };\n // Get css properties\n return Object.keys(res).reduce<UseSafeAreaInsetRes>((acc, cur) => {\n const style = getComputedStyle(document.documentElement).getPropertyValue(\n `--safe-area-inset-${cur}`\n );\n return { ...acc, [cur]: parseFloat(style) || 0 };\n }, res);\n};\n\nconst useSafeAreaInset = (): UseSafeAreaInsetRes => {\n const [safeAreaInset, setSafeAreaInset] = useState<UseSafeAreaInsetRes>({\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n });\n\n const updateSafeAreaInset = useCallback(() => {\n const nextSafeAreaInset = computeSafeAreaInset();\n if (JSON.stringify(safeAreaInset) === JSON.stringify(nextSafeAreaInset))\n return;\n setSafeAreaInset(nextSafeAreaInset);\n }, [safeAreaInset]);\n\n const updateSafeAreaInsetRef = useRef(updateSafeAreaInset);\n useEffect(() => {\n updateSafeAreaInsetRef.current = updateSafeAreaInset;\n }, [updateSafeAreaInset]);\n\n useBrowserLayoutEffect(() => {\n // Set css properties\n ['top', 'right', 'bottom', 'left'].forEach((item) => {\n document.documentElement.style.setProperty(\n `--safe-area-inset-${item}`,\n `env(safe-area-inset-${item})`\n );\n });\n // Update initial values\n updateSafeAreaInsetRef.current();\n }, []);\n\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'scroll',\n updateSafeAreaInset\n );\n\n return safeAreaInset;\n};\n\nexport default useSafeAreaInset;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,OAAOC,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAShE,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACjC,MAAMC,GAAG,GAAG;IAAEC,GAAG,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC;EACpD;EACA,OAAOC,MAAM,CAACC,IAAI,CAACN,GAAG,CAAC,CAACO,MAAM,CAAsB,CAACC,GAAG,EAAEC,GAAG,KAAK;IAChE,MAAMC,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,eAAe,CAAC,CAACC,gBAAgB,CACtE,qBAAoBL,GAAI,EAC3B,CAAC;IACD,OAAO;MAAE,GAAGD,GAAG;MAAE,CAACC,GAAG,GAAGM,UAAU,CAACL,KAAK,CAAC,IAAI;IAAE,CAAC;EAClD,CAAC,EAAEV,GAAG,CAAC;AACT,CAAC;AAED,MAAMgB,gBAAgB,GAAGA,CAAA,KAA2B;EAClD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGpB,QAAQ,CAAsB;IACtEG,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE;EACR,CAAC,CAAC;EAEF,MAAMe,mBAAmB,GAAGxB,WAAW,CAAC,MAAM;IAC5C,MAAMyB,iBAAiB,GAAGrB,oBAAoB,CAAC,CAAC;IAChD,IAAIsB,IAAI,CAACC,SAAS,CAACL,aAAa,CAAC,KAAKI,IAAI,CAACC,SAAS,CAACF,iBAAiB,CAAC,EACrE;IACFF,gBAAgB,CAACE,iBAAiB,CAAC;EACrC,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,MAAMM,sBAAsB,GAAG1B,MAAM,CAACsB,mBAAmB,CAAC;EAC1DvB,SAAS,CAAC,MAAM;IACd2B,sBAAsB,CAACC,OAAO,GAAGL,mBAAmB;EACtD,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB1B,sBAAsB,CAAC,MAAM;IAC3B;IACA,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAACgC,OAAO,CAAEC,IAAI,IAAK;MACnDd,QAAQ,CAACC,eAAe,CAACH,KAAK,CAACiB,WAAW,CACvC,qBAAoBD,IAAK,EAAC,EAC1B,uBAAsBA,IAAK,GAC9B,CAAC;IACH,CAAC,CAAC;IACF;IACAH,sBAAsB,CAACC,OAAO,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN9B,QAAQ,CACL,OAAOkC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRV,mBACF,CAAC;EAED,OAAOF,aAAa;AACtB,CAAC;AAED,eAAeD,gBAAgB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEvent","useCallback","useEffect","useRef","useState","computeSafeAreaInset","res","top","right","bottom","left","Object","keys","reduce","acc","cur","style","getComputedStyle","document","documentElement","getPropertyValue","parseFloat","useSafeAreaInset","safeAreaInset","setSafeAreaInset","updateSafeAreaInset","nextSafeAreaInset","JSON","stringify","updateSafeAreaInsetRef","current","forEach","item","setProperty","window","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport useEvent from '@os-design/use-event';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseSafeAreaInsetRes {\n top: number;\n right: number;\n bottom: number;\n left: number;\n}\n\nconst computeSafeAreaInset = () => {\n const res = { top: 0, right: 0, bottom: 0, left: 0 };\n // Get css properties\n return Object.keys(res).reduce<UseSafeAreaInsetRes>((acc, cur) => {\n const style = getComputedStyle(document.documentElement).getPropertyValue(\n `--safe-area-inset-${cur}`\n );\n return { ...acc, [cur]: parseFloat(style) || 0 };\n }, res);\n};\n\nconst useSafeAreaInset = (): UseSafeAreaInsetRes => {\n const [safeAreaInset, setSafeAreaInset] = useState<UseSafeAreaInsetRes>({\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n });\n\n const updateSafeAreaInset = useCallback(() => {\n const nextSafeAreaInset = computeSafeAreaInset();\n if (JSON.stringify(safeAreaInset) === JSON.stringify(nextSafeAreaInset))\n return;\n setSafeAreaInset(nextSafeAreaInset);\n }, [safeAreaInset]);\n\n const updateSafeAreaInsetRef = useRef(updateSafeAreaInset);\n useEffect(() => {\n updateSafeAreaInsetRef.current = updateSafeAreaInset;\n }, [updateSafeAreaInset]);\n\n useBrowserLayoutEffect(() => {\n // Set css properties\n ['top', 'right', 'bottom', 'left'].forEach((item) => {\n document.documentElement.style.setProperty(\n `--safe-area-inset-${item}`,\n `env(safe-area-inset-${item})`\n );\n });\n // Update initial values\n updateSafeAreaInsetRef.current();\n }, []);\n\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'scroll',\n updateSafeAreaInset\n );\n\n return safeAreaInset;\n};\n\nexport default useSafeAreaInset;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,OAAOC,QAAQ,MAAM,sBAAsB;AAC3C,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAShE,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACjC,MAAMC,GAAG,GAAG;IAAEC,GAAG,EAAE,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC;EACpD;EACA,OAAOC,MAAM,CAACC,IAAI,CAACN,GAAG,CAAC,CAACO,MAAM,CAAsB,CAACC,GAAG,EAAEC,GAAG,KAAK;IAChE,MAAMC,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,eAAe,CAAC,CAACC,gBAAgB,CACtE,qBAAoBL,GAAI,EAC3B,CAAC;IACD,OAAO;MAAE,GAAGD,GAAG;MAAE,CAACC,GAAG,GAAGM,UAAU,CAACL,KAAK,CAAC,IAAI;IAAE,CAAC;EAClD,CAAC,EAAEV,GAAG,CAAC;AACT,CAAC;AAED,MAAMgB,gBAAgB,GAAGA,CAAA,KAA2B;EAClD,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGpB,QAAQ,CAAsB;IACtEG,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE;EACR,CAAC,CAAC;EAEF,MAAMe,mBAAmB,GAAGxB,WAAW,CAAC,MAAM;IAC5C,MAAMyB,iBAAiB,GAAGrB,oBAAoB,CAAC,CAAC;IAChD,IAAIsB,IAAI,CAACC,SAAS,CAACL,aAAa,CAAC,KAAKI,IAAI,CAACC,SAAS,CAACF,iBAAiB,CAAC,EACrE;IACFF,gBAAgB,CAACE,iBAAiB,CAAC;EACrC,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,MAAMM,sBAAsB,GAAG1B,MAAM,CAACsB,mBAAmB,CAAC;EAC1DvB,SAAS,CAAC,MAAM;IACd2B,sBAAsB,CAACC,OAAO,GAAGL,mBAAmB;EACtD,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB1B,sBAAsB,CAAC,MAAM;IAC3B;IACA,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,CAACgC,OAAO,CAAEC,IAAI,IAAK;MACnDd,QAAQ,CAACC,eAAe,CAACH,KAAK,CAACiB,WAAW,CACvC,qBAAoBD,IAAK,EAAC,EAC1B,uBAAsBA,IAAK,GAC9B,CAAC;IACH,CAAC,CAAC;IACF;IACAH,sBAAsB,CAACC,OAAO,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN9B,QAAQ,CACL,OAAOkC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRV,mBACF,CAAC;EAED,OAAOF,aAAa;AACtB,CAAC;AAED,eAAeD,gBAAgB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/use-safe-area-inset",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.23",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -23,18 +23,18 @@
|
|
|
23
23
|
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
|
|
24
24
|
"build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
|
|
25
25
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
|
|
26
|
-
"build": "yarn clean && npm-run-all build:*",
|
|
26
|
+
"build": "yarn clean && npm-run-all 'build:*'",
|
|
27
27
|
"ncu": "ncu -u"
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@os-design/use-browser-layout-effect": "^1.0.
|
|
34
|
-
"@os-design/use-event": "^1.0.
|
|
33
|
+
"@os-design/use-browser-layout-effect": "^1.0.20",
|
|
34
|
+
"@os-design/use-event": "^1.0.20"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": ">=18"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
|
|
40
40
|
}
|
package/src/index.mdx
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
|
+
import UseSafeAreaInsetExample from './index.example';
|
|
3
|
+
|
|
4
|
+
<Meta title='Utils/useSafeAreaInset' />
|
|
5
|
+
|
|
6
|
+
# useSafeAreaInset
|
|
7
|
+
|
|
8
|
+
Calculates the safe area inset.
|
|
9
|
+
|
|
10
|
+
## Example of usage
|
|
11
|
+
|
|
12
|
+
```tsx
|
|
13
|
+
import React from 'react';
|
|
14
|
+
import { useSafeAreaInset } from '@os-design/utils';
|
|
15
|
+
|
|
16
|
+
const UseSafeAreaInsetExample: React.FC = () => {
|
|
17
|
+
const { top, right, bottom, left } = useSafeAreaInset();
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<>
|
|
21
|
+
<div>Top: {top}px</div>
|
|
22
|
+
<div>Right: {right}px</div>
|
|
23
|
+
<div>Bottom: {bottom}px</div>
|
|
24
|
+
<div>Left: {left}px</div>
|
|
25
|
+
</>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default UseSafeAreaInsetExample;
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
<UseSafeAreaInsetExample />
|