@geee-be/react-utils 1.1.5 → 1.1.6

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/hooks/index.js +1 -0
  3. package/dist/hooks/use-is-mobile.js +15 -0
  4. package/package.json +1 -1
  5. package/src/hooks/index.ts +1 -0
  6. package/src/hooks/use-is-mobile.tsx +21 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @geee-be/react-utils
2
2
 
3
+ ## 1.1.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 8011d1e: Add Collapsible, DropdownMenu, Separator, Sheet, Sidebar from shadcn
8
+
3
9
  ## 1.1.5
4
10
 
5
11
  ### Patch Changes
package/dist/hooks/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './use-broadcast-channel.js';
2
2
  export * from './use-history-state.js';
3
3
  export * from './use-is-client.js';
4
+ export * from './use-is-mobile.js';
4
5
  export * from './use-local-state.js';
package/dist/hooks/use-is-mobile.js ADDED
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ const MOBILE_BREAKPOINT = 768;
3
+ export function useIsMobile() {
4
+ const [isMobile, setIsMobile] = React.useState(undefined);
5
+ React.useEffect(() => {
6
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
7
+ const onChange = () => {
8
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
9
+ };
10
+ mql.addEventListener('change', onChange);
11
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
12
+ return () => mql.removeEventListener('change', onChange);
13
+ }, []);
14
+ return !!isMobile;
15
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geee-be/react-utils",
3
- "version": "1.1.5",
3
+ "version": "1.1.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
package/src/hooks/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './use-broadcast-channel.js';
2
2
  export * from './use-history-state.js';
3
3
  export * from './use-is-client.js';
4
+ export * from './use-is-mobile.js';
4
5
  export * from './use-local-state.js';
package/src/hooks/use-is-mobile.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+
3
+ const MOBILE_BREAKPOINT = 768;
4
+
5
+ export function useIsMobile() {
6
+ const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
7
+ undefined,
8
+ );
9
+
10
+ React.useEffect(() => {
11
+ const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
12
+ const onChange = () => {
13
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
14
+ };
15
+ mql.addEventListener('change', onChange);
16
+ setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
17
+ return () => mql.removeEventListener('change', onChange);
18
+ }, []);
19
+
20
+ return !!isMobile;
21
+ }