@canutin/svelte-currency-input

svelte-currency-input

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

Play with REPL

---

Features

• Formats positive and negative values
• Leverages Intl.NumberFormat for localizing currency denominations and masking the input
• Simple 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="total" 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"
    value="-420.69"
  />

  <!-- Formatted value -->
  <input
    class="currencyInput__formatted"
    type="text"
    name="formatted-total"
    value="€ -420,69"
  />
</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=formatted-total]) values
required	boolean	false	Marks the inputs as required
disabled	boolean	false	Marks the inputs as disabled
isNegativeAllowed	boolean	true	If false, 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 it's disabled */
  div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ }

  /* 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