fix: formatting and locales.

dev/pages/+Page.tsx

@@ -19,7 +19,7 @@ export default function HomePage() {
 
         <div class="flex items-center gap-x-3">
           <button
-            class="flex items-center gap-x-2 rounded-full bg-neutral-900 px-6 py-3 active:scale-95"
+            class="flex items-center gap-x-2 rounded-full bg-neutral-900 px-6 py-3 transition active:scale-95"
             onClick={() => {
               cycle();
             }}
@@ -31,7 +31,7 @@ export default function HomePage() {
           <a
             href="https://github.com/blankeos/solid-number-flow"
             target="_blank"
-            class="rounded-full border border-white p-2 hover:bg-neutral-50/20 active:scale-95"
+            class="rounded-full border border-white p-2 transition hover:bg-neutral-50/20 active:scale-95"
           >
             <IconGithub class="h-5 w-5" />
           </a>
@@ -61,7 +61,7 @@ export default function HomePage() {
   );
 }
 
-import { createEffect, createMemo, createSignal } from 'solid-js';
+import { createMemo, createSignal } from 'solid-js';
 import { IconShuffle } from '../icons/shuffle';
 import { IconSolidJS } from '../icons/solidjs';
 import { Markdown } from '../markdown';

dev/pages/test/+Page.tsx

@@ -0,0 +1,47 @@
+import { createSignal, onMount } from 'solid-js';
+import NumberFlow from 'src';
+
+export default function Page() {
+  const [value1, setValue1] = createSignal(123);
+  const [value2, setValue2] = createSignal(0);
+  const [value3, setValue3] = createSignal(123);
+  const [value4, setValue4] = createSignal(0);
+
+  onMount(() => {
+    setTimeout(() => {
+      setValue1(500);
+    }, 500);
+    setTimeout(() => {
+      setValue2(1.42);
+    }, 800);
+    setTimeout(() => {
+      setValue3(7298);
+    }, 1000);
+    setTimeout(() => {
+      setValue4(1_500_540);
+    }, 1500);
+  });
+
+  return (
+    <div class="flex min-h-screen flex-col items-center justify-center gap-y-3 bg-zinc-950 text-white">
+      <NumberFlow value={value1()} locales="en-US" />
+      <NumberFlow
+        value={value2()}
+        locales="en-US"
+        format={{
+          style: 'percent',
+        }}
+      />
+      <NumberFlow value={value3()} locales="en-US" />
+      <NumberFlow
+        value={value4()}
+        locales="en-US"
+        format={{
+          style: 'currency',
+          currency: 'USD',
+        }}
+      />
+      <a href="/">Back /</a>
+    </div>
+  );
+}

src/index.tsx

@@ -54,7 +54,7 @@ export default function NumberFlow(props: NumberFlowProps) {
   );
   const formatString = createMemo(() => (props.format ? JSON.stringify(props.format) : ''));
   const parts = createMemo(() => {
-    const formatter = (formatters[`${localesString}:${formatString}`] ??= new Intl.NumberFormat(
+    const formatter = (formatters[`${localesString()}:${formatString()}`] ??= new Intl.NumberFormat(
       props.locales,
       props.format,
     ));
@@ -92,7 +92,7 @@ export default function NumberFlow(props: NumberFlowProps) {
   return (
     <Dynamic
       ref={props.ref}
-      component={'number-flow'}
+      component="number-flow"
       class={props.class}
       //   https://docs.solidjs.com/reference/jsx-attributes/attr
       attr:data-will-change={props.willChange ? '' : undefined}