@canutin/svelte-currency-input

svelte-currency-input

A form input that converts numbers to currencies as you type in localized formats

Features

• Formats positive and negative values
• Leverages Intl.NumberFormat for localizing currency denominations and masking the input
• Comprehensive API
• Minimal default styling, easy to customize

Usage

npm install svelte-currency-input --save

<script lang="ts">
	import CurrencyInput from '@canutin/svelte-currency-input';

	const locale = 'nl-NL';
	const currency = 'EUR';
</script>

<CurrencyInput name="exchange-rate" value={-420.69} {locale} {currency} />

How it works

When the form is submitted you get unformatted or formatted values from two <input />'s. This is more or less what <CurrencyInput /> looks like under the hood:

<div class="currencyInput">
	<!-- Unformatted value --> 
	<input class="currencyInput__unformatted" type="hidden" name="total" />

	<!-- Formatted value -->
	<input class="currencyInput__formatted" type="text" name="formattedTotal" />
</div>

API

Option	Type	Default	Description
value	number	undefined	Initial value. If left undefined a formatted value of 0 is visible as a placeholder
locale	string	en-US	Overrides default locale. Examples
currency	string	USD	Overrides default currency. Examples
name	string	total	Applies the name to the input fields for unformatted (e.g [name=total]) and formatted (e.g. [name=formattedTotal] in camelCase) values
required	boolean	false	Marks the inputs as required
disabled	boolean	false	Marks the inputs as disabled
isNegativeAllowed	boolean	true	If true, forces formatting only to positive values and ignores --positive and --negative styling modifiers

Styling

The default styles use BEM naming conventions. To override the default styles apply your styles as shown below:

<div class="my-currency-input">
	<CurrencyInput name="total" value={420.69} />
</div>

<style>
	/* Container */
	div.my-currency-input :global(div.currencyInput) { /* ... */}

	/* Formatted input */
	div.my-currency-input :global(input.currencyInput__formatted) { /* ... */}

	/* Formatted input when the value is zero */
	div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */}

	/* Formatted input when the value is positive */
	div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */}

	/* Formatted input when the value is negative */
	div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */}
</style>

Contributing

Here's ways in which you can contribute:

• Found a bug? Open a new issue
• Browse our existing issues
• Submit a pull request

Developing

This package was generated with SvelteKit. Install dependencies with npm install, then start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open