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

@@ -6,8 +6,11 @@ export default function AssetPrice({ symbol }: { symbol: string }) {
   return (
     <tr>
       <th>{symbol}</th>
-      <td>
-        <Formatted value={ticker.price} formatter="currency" />
+      <td align="right">
+        <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';