@geee-be/react-utils 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @geee-be/react-utils
 
+## 1.1.6
+
+### Patch Changes
+
+- 8011d1e: Add Collapsible, DropdownMenu, Separator, Sheet, Sidebar from shadcn
+
+## 1.1.5
+
+### Patch Changes
+
+- 70692ad: Use skeleton for input image on initial server render
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/hooks/index.js

@@ -1,3 +1,5 @@
 export * from './use-broadcast-channel.js';
 export * from './use-history-state.js';
+export * from './use-is-client.js';
+export * from './use-is-mobile.js';
 export * from './use-local-state.js';

package/dist/hooks/use-is-client.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from 'react';
+export const useIsClient = () => {
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+};

package/dist/hooks/use-is-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/hooks/use-local-state.stories.js

@@ -10,6 +10,6 @@ export const Primary = {
             val: 1,
         });
         console.log('render', value);
-        return (_jsxs("div", { children: [JSON.stringify(value), _jsx("button", { type: "button", onClick: () => setValue((prev) => ({ val: prev.val + 1 ?? -2 })), children: "Inc" })] }));
+        return (_jsxs("div", { children: [JSON.stringify(value), _jsx("button", { type: "button", onClick: () => setValue((prev) => ({ val: prev.val + 1 })), children: "Inc" })] }));
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "",
   "keywords": [],
   "license": "MIT",

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
 export * from './use-broadcast-channel.js';
 export * from './use-history-state.js';
+export * from './use-is-client.js';
+export * from './use-is-mobile.js';
 export * from './use-local-state.js';

package/src/hooks/use-is-client.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export const useIsClient = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+};

package/src/hooks/use-is-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-local-state.stories.tsx

@@ -19,7 +19,7 @@ export const Primary: Story = {
         {JSON.stringify(value)}
         <button
           type="button"
-          onClick={() => setValue((prev) => ({ val: prev.val + 1 ?? -2 }))}
+          onClick={() => setValue((prev) => ({ val: prev.val + 1 }))}
         >
           Inc
         </button>