Improve website number example

website/index.html

@@ -126,7 +126,7 @@ <h3 class="type-title">Format anything</h3>
       <div class="section-wrap stack-lg" id="get-started">
         <div class="heading-wrap stack-md">
           <span class="type-label text-accent">02 / GET STARTED</span>
-          <h2 class="type-heading">Configure for your needs.</h2>
+          <h2 class="type-heading">Try it live.</h2>
         </div>
 
         <div class="example-list stack-lg">
@@ -149,27 +149,22 @@ <h3 class="type-title">Number formatting</h3>
               </span>
               <pre
                 class="type-code"
-              ><code id="code-number" class="language-tsx">const formatNumber = (value: string) =&gt;
-  value
-    .replace(/\D/g, '')
-    .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+              ><code id="code-number" class="language-tsx">import { createNumberFormatter } from 'rifm/number'
+
+const number = createNumberFormatter({
+  allowNegative: true,
+  maximumFractionDigits: 0,
+})
 
 export function PriceInput() {
   const [value, setValue] = useState('240000')
   const rifm = useRifm({
     value,
     onChange: setValue,
-    format: formatNumber,
-    accept: /\d/g,
+    ...number,
   })
 
-  return (
-    &lt;label&gt;
-      Invoice total
-      &lt;span&gt;$&lt;/span&gt;
-      &lt;input {...rifm} inputMode="numeric" /&gt;
-    &lt;/label&gt;
-  )
+  return &lt;input {...rifm} inputMode="numeric" /&gt;
 }</code></pre>
             </div>
           </article>

website/src/demos.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { useRifm } from "rifm";
-import { formatDate, formatInteger, formatPhone, formatUppercase } from "./formatters";
+import { createNumberFormatter } from "rifm/number";
+import { formatDate, formatPhone, formatUppercase } from "./formatters";
 
 type DemoKind = "number" | "phone" | "date" | "uppercase";
 
@@ -11,9 +12,8 @@ const demoConfig = {
     prefix: "$",
     initialValue: "240000",
     placeholder: "0",
-    format: formatInteger,
-    accept: /\d/g,
     inputMode: "numeric" as const,
+    ...createNumberFormatter({ allowNegative: true, maximumFractionDigits: 0 }),
   },
   phone: {
     label: "US phone",

website/src/formatters.test.ts

@@ -1,12 +1,7 @@
 import { describe, expect, test } from "vitest";
-import { formatDate, formatInteger, formatPhone, formatUppercase } from "./formatters";
+import { formatDate, formatPhone, formatUppercase } from "./formatters";
 
 describe("example formatters", () => {
-  test("groups integer digits without losing an empty value", () => {
-    expect(formatInteger("1234567")).toBe("1,234,567");
-    expect(formatInteger("")).toBe("");
-  });
-
   test("formats a US phone number with libphonenumber as the user types", () => {
     expect(formatPhone("4155552671")).toBe("(415) 555-2671");
     expect(formatPhone("41555")).toBe("(415) 55");

website/src/formatters.ts

@@ -2,11 +2,6 @@ import { AsYouType } from "libphonenumber-js/min";
 
 const digitsOnly = (value: string) => value.replace(/\D/g, "");
 
-export const formatInteger = (value: string) => {
-  const digits = digitsOnly(value);
-  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-};
-
 export const formatPhone = (value: string) => {
   const digits = digitsOnly(value).slice(0, 10);
   return new AsYouType("US").input(digits);