@korsolutions/ui 0.0.13 → 0.0.14
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/package.json +6 -1
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useScreenSize.ts +41 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korsolutions/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.mjs",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
"default": "./dist/components/index.mjs",
|
|
21
21
|
"types": "./dist/components/index.d.mts",
|
|
22
22
|
"dev-source": "./src/components/index.ts"
|
|
23
|
+
},
|
|
24
|
+
"./hooks": {
|
|
25
|
+
"default": "./dist/hooks/index.mjs",
|
|
26
|
+
"types": "./dist/hooks/index.d.mts",
|
|
27
|
+
"dev-source": "./src/hooks/index.ts"
|
|
23
28
|
}
|
|
24
29
|
},
|
|
25
30
|
"scripts": {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./useScreenSize";
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { useWindowDimensions } from "react-native";
|
|
2
|
+
|
|
3
|
+
export type ScreenSize = "mobile" | "tablet" | "desktop";
|
|
4
|
+
|
|
5
|
+
interface Response {
|
|
6
|
+
readonly size: ScreenSize;
|
|
7
|
+
readonly width: number;
|
|
8
|
+
readonly height: number;
|
|
9
|
+
readonly isMobile: boolean;
|
|
10
|
+
readonly isTablet: boolean;
|
|
11
|
+
readonly isDesktop: boolean;
|
|
12
|
+
|
|
13
|
+
select<T>(specifics: ({ [size in ScreenSize]?: T } & { default: T }) | { [platform in ScreenSize]: T }): T;
|
|
14
|
+
select<T>(specifics: { [size in ScreenSize]?: T }): T | undefined;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function useScreenSize(): Response {
|
|
18
|
+
const windowDimensions = useWindowDimensions();
|
|
19
|
+
|
|
20
|
+
const size: ScreenSize = windowDimensions.width < 768 ? "mobile" : windowDimensions.width < 1024 ? "tablet" : "desktop";
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
size,
|
|
24
|
+
width: windowDimensions.width,
|
|
25
|
+
height: windowDimensions.height,
|
|
26
|
+
isMobile: size === "mobile",
|
|
27
|
+
isTablet: size === "tablet",
|
|
28
|
+
isDesktop: size === "desktop",
|
|
29
|
+
select: (specifics) => {
|
|
30
|
+
const { mobile, tablet, desktop } = specifics;
|
|
31
|
+
|
|
32
|
+
if (size === "mobile" && mobile !== undefined) return mobile;
|
|
33
|
+
if (size === "tablet" && tablet !== undefined) return tablet;
|
|
34
|
+
if (size === "desktop" && desktop !== undefined) return desktop;
|
|
35
|
+
if (!("default" in specifics)) {
|
|
36
|
+
throw new Error(`Utils.$screenSize.select: No value specified for current screen size: ${size}`);
|
|
37
|
+
}
|
|
38
|
+
return specifics.default;
|
|
39
|
+
},
|
|
40
|
+
};
|
|
41
|
+
}
|