Skip to content
@samline/formatter

@samline/formatter

Format inputs in one call. Get a display-ready string and a backend-ready string from a single, pure function.
Get startedView on GitHub

A pure input formatter that returns two strings at once — a display-ready formatted value and a backend-ready raw value. No DOM, no I/O, no state. Works in Node, React, Vue, Svelte, Shopify themes, or anywhere JavaScript runs.

import { format } from '@samline/formatter'


format('5512345678', 'phone')
// => { formatted: '55 1234 5678', raw: '5512345678', type: 'phone' }

Why @samline/formatter?

Section titled “Why @samline/formatter?”
  • One function, two outputs — formatted for the visible <input>, raw for the hidden field. Never re-parse formatted text on the server.
  • Framework-agnostic — Plain JS, no React/Vue/Svelte adapter. Wire it into whatever you already use.
  • Pure — Deterministic. No DOM reads/writes, no globals, no Date.now(). Safe to call on every keystroke.
  • Typed — First-class TypeScript with FormatType, FormatOptions, and FormatterResult exported.
  • Validation built-in — Bundled regex object pairs every common pattern with a ready-to-use error message.
  • Tiny core — Built on cleave-zen and libphonenumber-js. Optional browser IIFE ships with both dependencies bundled.

Next steps

Section titled “Next steps”

Installation

Install via npm, pnpm, yarn, or bun, or drop the browser IIFE into a <script> tag.

Get started →

Configuration

Every option, with defaults and per-formatType behavior.

Configuration →