main 🧊 add support text

Author: debabin

packages/core/src/bundle/hooks/useGamepad/useGamepad.js

@@ -30,13 +30,18 @@ export const useGamepad = () => {
       if (gamepad && gamepads[gamepad.index]) gamepads[gamepad.index] = createGamepad(gamepad);
     }
   };
-  const { active } = useRaf(updateGamepadState, { enabled: !!Object.keys(gamepads).length });
+  const { active } = useRaf(updateGamepadState, {
+    enabled: !!Object.keys(gamepads).length
+  });
   useEffect(() => {
     if (!supported) return;
     const gamepads = navigator.getGamepads();
     setGamepads(
       gamepads.reduce(
-        (acc, gamepad) => ({ ...acc, ...(gamepad && { [gamepad.index]: createGamepad(gamepad) }) }),
+        (acc, gamepad) => ({
+          ...acc,
+          ...(gamepad && { [gamepad.index]: createGamepad(gamepad) })
+        }),
         {}
       )
     );

packages/core/src/bundle/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -13,7 +13,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @param {boolean} [options.enabled=true] The IntersectionObserver options
  * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
  * @param {HookTarget} [options.root] The root element to observe
- * @returns {UseIntersectionObserverReturn} An object containing the state and the supported status
+ * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
  * const { ref, entry, inView } = useIntersectionObserver();

packages/core/src/bundle/hooks/useMemory/useMemory.js

@@ -13,12 +13,16 @@ import { useInterval } from '../useInterval/useInterval';
  * const { supported, value } = useMemory();
  */
 export const useMemory = () => {
-  const supported = performance && 'memory' in performance;
-  const [value, setValue] = useState({
-    jsHeapSizeLimit: 0,
-    totalJSHeapSize: 0,
-    usedJSHeapSize: 0
+  const supported = performance && 'memory' in performance && !!performance.memory;
+  const [value, setValue] = useState(
+    performance?.memory ?? {
+      jsHeapSizeLimit: 0,
+      totalJSHeapSize: 0,
+      usedJSHeapSize: 0
+    }
+  );
+  useInterval(() => setValue(performance.memory), 1000, {
+    immediately: supported
   });
-  useInterval(() => setValue(performance.memory), 1000, { immediately: supported });
   return { supported, value };
 };

packages/core/src/hooks/useDeviceOrientation/useDeviceOrientation.demo.tsx

@@ -3,6 +3,21 @@ import { useDeviceOrientation } from '@siberiacancode/reactuse';
 const Demo = () => {
   const deviceOrientation = useDeviceOrientation();
 
+  if (!deviceOrientation.supported)
+    return (
+      <p>
+        Api not supported, make sure to check for compatibility with different browsers when using
+        this{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/API/Window/DeviceOrientationEvent'
+          rel='noreferrer'
+          target='_blank'
+        >
+          api
+        </a>
+      </p>
+    );
+
   return (
     <pre lang='json'>
       <b>Device orientation data:</b>

packages/core/src/hooks/useDevicePixelRatio/useDevicePixelRatio.demo.tsx

@@ -3,9 +3,20 @@ import { useDevicePixelRatio } from '@siberiacancode/reactuse';
 const Demo = () => {
   const { supported, ratio } = useDevicePixelRatio();
 
-  if (!supported) {
-    return <p>Device pixel ratio is not supported.</p>;
-  }
+  if (!supported)
+    return (
+      <p>
+        Api not supported, make sure to check for compatibility with different browsers when using
+        this{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio'
+          rel='noreferrer'
+          target='_blank'
+        >
+          api
+        </a>
+      </p>
+    );
 
   return (
     <p>

packages/core/src/hooks/useDisplayMedia/useDisplayMedia.demo.tsx

@@ -1,17 +1,41 @@
 import { useDisplayMedia } from '@siberiacancode/reactuse';
 
 const Demo = () => {
-  const { sharing, supported, start, stop, ref } = useDisplayMedia();
+  const displayMedia = useDisplayMedia();
+
+  if (!displayMedia.supported)
+    return (
+      <p>
+        Api not supported, make sure to check for compatibility with different browsers when using
+        this{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia'
+          rel='noreferrer'
+          target='_blank'
+        >
+          api
+        </a>
+      </p>
+    );
 
   return (
     <div className='flex flex-col gap-4'>
       <div className='flex items-center justify-center gap-4'>
-        <button disabled={!supported} type='button' onClick={sharing ? stop : start}>
-          {sharing ? 'Stop Sharing' : 'Start Sharing'}
+        <button
+          type='button'
+          onClick={displayMedia.sharing ? displayMedia.stop : displayMedia.start}
+        >
+          {displayMedia.sharing ? 'Stop Sharing' : 'Start Sharing'}
         </button>
       </div>
 
-      <video muted playsInline ref={ref} className='w-full max-w-2xl rounded border' autoPlay />
+      <video
+        muted
+        playsInline
+        ref={displayMedia.ref}
+        className='w-full max-w-2xl rounded border'
+        autoPlay
+      />
     </div>
   );
 };

packages/core/src/hooks/useEyeDropper/useEyeDropper.demo.tsx

@@ -3,11 +3,23 @@ import { useEyeDropper } from '@siberiacancode/reactuse';
 const Demo = () => {
   const eyeDropper = useEyeDropper();
 
-  return (
-    <>
+  if (!eyeDropper.supported)
+    return (
       <p>
-        supported: <code>{String(eyeDropper.supported)}</code>
+        Api not supported, make sure to check for compatibility with different browsers when using
+        this{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper'
+          rel='noreferrer'
+          target='_blank'
+        >
+          api
+        </a>
       </p>
+    );
+
+  return (
+    <>
       <p>
         value:{' '}
         <span style={{ color: eyeDropper.value }}>

packages/core/src/hooks/useGamepad/useGamepad.demo.tsx

@@ -3,12 +3,23 @@ import { useGamepad } from '@siberiacancode/reactuse';
 const Demo = () => {
   const { supported, gamepads } = useGamepad();
 
-  return (
-    <>
+  if (!supported)
+    return (
       <p>
-        supported: <code>{String(supported)}</code>
+        Api not supported, make sure to check for compatibility with different browsers when using
+        this{' '}
+        <a
+          href='https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getGamepads'
+          rel='noreferrer'
+          target='_blank'
+        >
+          api
+        </a>
       </p>
+    );
 
+  return (
+    <>
       <p>Gamepads</p>
       {!gamepads.length && <code>no gamepads connected</code>}
       {!!gamepads.length && (

packages/core/src/hooks/useGamepad/useGamepad.ts

@@ -53,14 +53,19 @@ export const useGamepad = () => {
     }
   };
 
-  const { active } = useRaf(updateGamepadState, { enabled: !!Object.keys(gamepads).length });
+  const { active } = useRaf(updateGamepadState, {
+    enabled: !!Object.keys(gamepads).length
+  });
 
   useEffect(() => {
     if (!supported) return;
     const gamepads = navigator.getGamepads();
     setGamepads(
       gamepads.reduce(
-        (acc, gamepad) => ({ ...acc, ...(gamepad && { [gamepad.index]: createGamepad(gamepad) }) }),
+        (acc, gamepad) => ({
+          ...acc,
+          ...(gamepad && { [gamepad.index]: createGamepad(gamepad) })
+        }),
         {}
       )
     );

packages/core/src/hooks/useIntersectionObserver/useIntersectionObserver.ts

@@ -42,7 +42,7 @@ export interface UseIntersectionObserver {
  * @param {boolean} [options.enabled=true] The IntersectionObserver options
  * @param {((entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void) | undefined} [options.onChange] The callback to execute when intersection is detected
  * @param {HookTarget} [options.root] The root element to observe
- * @returns {UseIntersectionObserverReturn} An object containing the state and the supported status
+ * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
  * const { ref, entry, inView } = useIntersectionObserver();