@number-flow/react 0.4.2 → 0.4.4

package/README.md

@@ -1,15 +1,13 @@
 [![NumberFlow for React](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me)
 
-# Number Flow for React
+# NumberFlow for React
 
-A React component to transition & format numbers.
+An animated number component.
 
 [![NPM Version](https://img.shields.io/npm/v/@number-flow/react.svg)](https://npmjs.com/package/@number-flow/react)
 [![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/react@latest)](https://bundlephobia.com/package/@number-flow/react@latest)
 [![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian)
 
----
-
 ## Documentation
 
 For full documentation, visit [number-flow.barvian.me](https://number-flow.barvian.me).

package/dist/index.d.mts

@@ -37,8 +37,10 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
 declare function NumberFlowGroup({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
+declare const useIsSupported: () => boolean;
+declare const usePrefersReducedMotion: () => boolean;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -37,8 +37,10 @@ declare const NumberFlow: React.ForwardRefExoticComponent<React.HTMLAttributes<N
 declare function NumberFlowGroup({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
+declare const useIsSupported: () => boolean;
+declare const usePrefersReducedMotion: () => boolean;
 declare function useCanAnimate({ respectMotionPreference }?: {
     respectMotionPreference?: boolean | undefined;
 }): boolean;
 
-export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate };
+export { NumberFlowElement, NumberFlowGroup, type NumberFlowProps, NumberFlow as default, useCanAnimate, useIsSupported, usePrefersReducedMotion };

package/dist/index.js

@@ -34,7 +34,9 @@ __export(src_exports, {
   NumberFlowElement: () => NumberFlowElement,
   NumberFlowGroup: () => NumberFlowGroup,
   default: () => src_default,
-  useCanAnimate: () => useCanAnimate
+  useCanAnimate: () => useCanAnimate,
+  useIsSupported: () => useIsSupported,
+  usePrefersReducedMotion: () => usePrefersReducedMotion
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
@@ -219,28 +221,31 @@ function NumberFlowGroup({ children }) {
   );
   return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
 }
+var useIsSupported = () => React.useSyncExternalStore(
+  () => () => {
+  },
+  // this value doesn't change, but it's useful to specify a different SSR value:
+  () => import_number_flow.canAnimate,
+  () => false
+);
+var usePrefersReducedMotion = () => React.useSyncExternalStore(
+  (cb) => {
+    import_number_flow.prefersReducedMotion?.addEventListener("change", cb);
+    return () => import_number_flow.prefersReducedMotion?.removeEventListener("change", cb);
+  },
+  () => import_number_flow.prefersReducedMotion.matches,
+  () => false
+);
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const [canAnimate, setCanAnimate] = React.useState(false);
-  const [reducedMotion, setReducedMotion] = React.useState(false);
-  React.useEffect(() => {
-    setCanAnimate(import_number_flow.canAnimate);
-    setReducedMotion(import_number_flow.prefersReducedMotion?.matches ?? false);
-  }, []);
-  React.useEffect(() => {
-    if (!respectMotionPreference) return;
-    const onChange = ({ matches }) => {
-      setReducedMotion(matches);
-    };
-    import_number_flow.prefersReducedMotion?.addEventListener("change", onChange);
-    return () => {
-      import_number_flow.prefersReducedMotion?.removeEventListener("change", onChange);
-    };
-  }, [respectMotionPreference]);
-  return canAnimate && (!respectMotionPreference || !reducedMotion);
+  const isSupported = useIsSupported();
+  const reducedMotion = usePrefersReducedMotion();
+  return isSupported && (!respectMotionPreference || !reducedMotion);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NumberFlowElement,
   NumberFlowGroup,
-  useCanAnimate
+  useCanAnimate,
+  useIsSupported,
+  usePrefersReducedMotion
 });

package/dist/index.mjs

@@ -6,7 +6,7 @@ import {
   renderInnerHTML,
   formatToData,
   NumberFlowLite,
-  prefersReducedMotion,
+  prefersReducedMotion as _prefersReducedMotion,
   canAnimate as _canAnimate,
   define
 } from "number-flow";
@@ -190,28 +190,31 @@ function NumberFlowGroup({ children }) {
   );
   return /* @__PURE__ */ React.createElement(NumberFlowGroupContext.Provider, { value }, children);
 }
+var useIsSupported = () => React.useSyncExternalStore(
+  () => () => {
+  },
+  // this value doesn't change, but it's useful to specify a different SSR value:
+  () => _canAnimate,
+  () => false
+);
+var usePrefersReducedMotion = () => React.useSyncExternalStore(
+  (cb) => {
+    _prefersReducedMotion?.addEventListener("change", cb);
+    return () => _prefersReducedMotion?.removeEventListener("change", cb);
+  },
+  () => _prefersReducedMotion.matches,
+  () => false
+);
 function useCanAnimate({ respectMotionPreference = true } = {}) {
-  const [canAnimate, setCanAnimate] = React.useState(false);
-  const [reducedMotion, setReducedMotion] = React.useState(false);
-  React.useEffect(() => {
-    setCanAnimate(_canAnimate);
-    setReducedMotion(prefersReducedMotion?.matches ?? false);
-  }, []);
-  React.useEffect(() => {
-    if (!respectMotionPreference) return;
-    const onChange = ({ matches }) => {
-      setReducedMotion(matches);
-    };
-    prefersReducedMotion?.addEventListener("change", onChange);
-    return () => {
-      prefersReducedMotion?.removeEventListener("change", onChange);
-    };
-  }, [respectMotionPreference]);
-  return canAnimate && (!respectMotionPreference || !reducedMotion);
+  const isSupported = useIsSupported();
+  const reducedMotion = usePrefersReducedMotion();
+  return isSupported && (!respectMotionPreference || !reducedMotion);
 }
 export {
   NumberFlowElement,
   NumberFlowGroup,
   src_default as default,
-  useCanAnimate
+  useCanAnimate,
+  useIsSupported,
+  usePrefersReducedMotion
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.2",
+  "version": "0.4.4",
   "author": {
     "name": "Maxwell Barvian",
     "email": "max@barvian.me",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "esm-env": "^1.1.4",
-    "number-flow": "0.4.1"
+    "number-flow": "0.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",
@@ -61,8 +61,8 @@
     "tsup": "^8.2.4"
   },
   "peerDependencies": {
-    "react": "^18 || ^19.0.0-rc-915b914b3a-20240515",
-    "react-dom": "^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "scripts": {
     "build": "tsup --tsconfig tsconfig.build.json",