@number-flow/react 0.4.3 → 0.5.0

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
+export * from 'number-flow/plugins';
 
 declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -37,8 +38,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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NumberFlowLite, Value, Format, Props } from 'number-flow';
 export { Format, NumberPartType, Trend, Value } from 'number-flow';
+export * from 'number-flow/plugins';
 
 declare const OBSERVED_ATTRIBUTES: readonly ["data", "digits"];
 type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
@@ -37,8 +38,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

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -34,12 +35,15 @@ __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"));
 var import_number_flow = require("number-flow");
 var import_esm_env = require("esm-env");
+__reExport(src_exports, require("number-flow/plugins"), module.exports);
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
 var OBSERVED_ATTRIBUTES = ["data", "digits"];
@@ -60,7 +64,7 @@ function splitProps(props) {
     animated,
     respectMotionPreference,
     trend,
-    continuous,
+    plugins,
     ...rest
   } = props;
   return [
@@ -71,7 +75,7 @@ function splitProps(props) {
       animated,
       respectMotionPreference,
       trend,
-      continuous
+      plugins
     },
     rest
   ];
@@ -219,28 +223,32 @@ 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,
+  ...require("number-flow/plugins")
 });

package/dist/index.mjs

@@ -6,11 +6,12 @@ import {
   renderInnerHTML,
   formatToData,
   NumberFlowLite,
-  prefersReducedMotion,
+  prefersReducedMotion as _prefersReducedMotion,
   canAnimate as _canAnimate,
   define
 } from "number-flow";
 import { BROWSER } from "esm-env";
+export * from "number-flow/plugins";
 var REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]);
 var isReact19 = REACT_MAJOR >= 19;
 var OBSERVED_ATTRIBUTES = ["data", "digits"];
@@ -31,7 +32,7 @@ function splitProps(props) {
     animated,
     respectMotionPreference,
     trend,
-    continuous,
+    plugins,
     ...rest
   } = props;
   return [
@@ -42,7 +43,7 @@ function splitProps(props) {
       animated,
       respectMotionPreference,
       trend,
-      continuous
+      plugins
     },
     rest
   ];
@@ -190,28 +191,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.3",
+  "version": "0.5.0",
   "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.5.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.48.0",