Registry / ui / svelte-number-formatter

svelte-number-formatter

library1.2.1jsnpmunverified

A reactive number formatter for Svelte + TypeScript inputs, version 1.2.1. It provides real-time formatting (decimal, currency, percentage), input validation, locale-aware formatting, min/max validation, prefix/suffix support, and increment/decrement utilities. Released under MIT, with TypeScript type definitions included. Differentiators: Svelte store integration with reactive updates, comprehensive validation, and a simple bindable handler property for input elements.

npm install svelte-number-formatter

package ↗

INSTALL

IMPORT

SIG · SVELTE-NUMBER-FORM

svelte-number-formatter

uijavascriptv1.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

NumberFormatter

✓ import { NumberFormatter } from 'svelte-number-formatter'

✗ const NumberFormatter = require('svelte-number-formatter')

ESM import required; package does not provide CommonJS exports.

NumberFormatter class

✓ import { NumberFormatter } from 'svelte-number-formatter'

✗ import NumberFormatter from 'svelte-number-formatter'

Named export, not default.

FormatOptions type

✓ import type { FormatOptions } from 'svelte-number-formatter'

TypeScript users should use type import for types.

Creates a NumberFormatter with currency options and logs formatted, raw, and numeric values.

import { NumberFormatter } from 'svelte-number-formatter'; const formatter = new NumberFormatter('1234.56', { style: 'currency', currency: 'USD', decimals: 2, useGrouping: true }); console.log('Formatted:', formatter.formatted); // $1,234.56 console.log('Raw:', formatter.raw); // 1234.56 console.log('Value:', formatter.value); // 1234.56

Debug

Known issues

gotchaThe 'handler' property is a string setter that triggers reactive updates; do not assign directly to 'formatted' thoughtlessly.

fix

Always set 'handler' property to input values; 'formatted' is read-only and updated automatically.

affects: >=1.0.0

gotchaThe 'value' property returns NaN if input cannot be parsed; use 'validation' store to check validity.

fix

Subscribe to formatter.validation to detect invalid inputs.

affects: >=1.0.0

gotchaThe 'raw' property is the numeric string stripped of symbols, but it may include leading zeros. Not safe for direct numeric operations.

fix

Use formatter.value (number) instead of formatter.raw for arithmetic.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'handler')

Attempting to use NumberFormatter before the Svelte component is mounted or the formatter is created.

fix

Move formatter instantiation to the script section of your Svelte component, before using it in markup.

Cannot find module 'svelte-number-formatter' or its corresponding type declarations.

Missing TypeScript type declarations or outdated package version.

fix

Install the package and ensure your tsconfig.json includes 'node_modules/@types' or the package's types.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

28 hits · last 30 days

node

OpenAI (training)

Resources

packagesvelte-number-formatter ↗