docs: Example live prices animate on transition

Author: ntucker

docs/core/shared/_useLive.mdx

@@ -1,6 +1,6 @@
 import HooksPlayground from '@site/src/components/HooksPlayground';
 
-<HooksPlayground row>
+<HooksPlayground row defaultTab={props.defaultTab}>
 
 ```typescript title="Ticker" {32} collapsed
 import { Entity, RestEndpoint } from '@data-client/rest';
@@ -47,7 +47,10 @@ function AssetPrice({ productId }: Props) {
   return (
     <center>
       {productId}{' '}
-      <Formatted value={ticker.price} formatter="currency" />
+      <NumberFlow
+        value={ticker.price}
+        format={{ style: 'currency', currency: 'USD' }}
+      />
     </center>
   );
 }

docs/rest/guides/network-transform.md

@@ -249,7 +249,10 @@ function AssetPrice({ productId }: Props) {
   return (
     <center>
       {productId}{' '}
-      <Formatted value={ticker.price} formatter="currency" />
+      <NumberFlow
+        value={ticker.price}
+        format={{ style: 'currency', currency: 'USD' }}
+      />
     </center>
   );
 }

examples/nextjs/components/AssetPrice.tsx

@@ -1,17 +1,20 @@
 'use client';
 import { useLive } from '@data-client/react';
+import NumberFlow from '@number-flow/react';
 
 import { getTicker } from '@/resources/Ticker';
 
-import { Formatted } from './Formatted';
-
 export default function AssetPrice({ symbol }: Props) {
   const product_id = `${symbol}-USD`;
   // Learn more about Reactive Data Client: https://dataclient.io/docs
   const ticker = useLive(getTicker, { product_id });
   return (
     <span>
-      {symbol} <Formatted value={ticker.price} formatter="currency" />
+      {symbol}{' '}
+      <NumberFlow
+        value={ticker.price}
+        format={{ style: 'currency', currency: 'USD' }}
+      />
     </span>
   );
 }

examples/nextjs/components/Formatted.tsx

@@ -14,6 +14,7 @@
     "@babel/core": "^7.24.7",
     "@data-client/react": "^0.14.0",
     "@data-client/rest": "^0.14.0",
+    "@number-flow/react": "^0.2.1",
     "@types/node": "22.7.7",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",

examples/nextjs/components/formatters/index.ts

@@ -46,6 +46,7 @@
     "@docusaurus/theme-mermaid": "^3.0.1",
     "@js-temporal/polyfill": "^0.4.4",
     "@monaco-editor/react": "^4.4.6",
+    "@number-flow/react": "^0.2.1",
     "bignumber.js": "9.1.2",
     "clsx": "2.1.1",
     "monaco-editor": "^0.52.0",

examples/nextjs/package-lock.json

@@ -7,7 +7,10 @@ export default function AssetPrice({ symbol }: { symbol: string }) {
     <tr>
       <th>{symbol}</th>
       <td>
-        <Formatted value={ticker.price} formatter="currency" />
+        <NumberFlow
+          value={ticker.price}
+          format={{ style: 'currency', currency: 'USD' }}
+        />
       </td>
     </tr>
   );

examples/nextjs/package.json

@@ -7,3 +7,4 @@ export { TextInput } from './TextInput';
 export { TextArea } from './TextArea';
 export { SearchIcon } from './SearchIcon';
 export { Loading } from './Loading';
+export { default as NumberFlow } from '@number-flow/react';

website/package.json

@@ -5,7 +5,6 @@ import * as rest from '@data-client/rest';
 import type { Fixture, Interceptor } from '@data-client/test';
 import { Temporal, Intl as PolyIntl } from '@js-temporal/polyfill';
 import BigNumber from 'bignumber.js';
-import React from 'react';
 import { LiveProvider } from 'react-live';
 import { v4 as uuid } from 'uuid';
 

website/src/components/Demo/code/live-app/polling/AssetPrice.tsx

@@ -0,0 +1,59 @@
+import { NumberFlowLite, Value, Format } from 'number-flow';
+import * as React from 'react';
+export { Format, Trend, Value } from 'number-flow';
+
+declare const OBSERVED_ATTRIBUTES: readonly ['parts'];
+type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number];
+declare class NumberFlowElement extends NumberFlowLite {
+  static observedAttributes: readonly ['parts'];
+  attributeChangedCallback(
+    attr: ObservedAttribute,
+    _oldValue: string,
+    newValue: string,
+  ): void;
+}
+type NumberFlowProps = React.HTMLAttributes<NumberFlowElement> & {
+  value: Value;
+  locales?: Intl.LocalesArgument;
+  format?: Format;
+  isolate?: boolean;
+  animated?: boolean;
+  respectMotionPreference?: boolean;
+  willChange?: boolean;
+  onAnimationsStart?: () => void;
+  onAnimationsFinish?: () => void;
+  trend?: (typeof NumberFlowElement)['prototype']['trend'];
+  opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
+  transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
+  spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
+};
+declare const NumberFlow: (
+  options: React.HTMLAttributes<NumberFlowElement> & {
+    value: Value;
+    locales?: Intl.LocalesArgument;
+    format?: Format;
+    isolate?: boolean;
+    animated?: boolean;
+    respectMotionPreference?: boolean;
+    willChange?: boolean;
+    onAnimationsStart?: () => void;
+    onAnimationsFinish?: () => void;
+    trend?: (typeof NumberFlowElement)['prototype']['trend'];
+    opacityTiming?: (typeof NumberFlowElement)['prototype']['opacityTiming'];
+    transformTiming?: (typeof NumberFlowElement)['prototype']['transformTiming'];
+    spinTiming?: (typeof NumberFlowElement)['prototype']['spinTiming'];
+  } & React.RefAttributes<NumberFlowElement>,
+) => JSX.Element;
+
+declare function useCanAnimate({
+  respectMotionPreference,
+}?: {
+  respectMotionPreference?: boolean | undefined;
+}): boolean;
+
+export {
+  NumberFlowElement,
+  type NumberFlowProps,
+  NumberFlow as default,
+  useCanAnimate,
+};