@canutin/svelte-currency-input

svelte-currency-input

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

👩‍💻 Play with it on REPL  —  💵 See it in a real project!

---

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';
</script>

<CurrencyInput name="total" value={-420.69} locale="nl-NL" currency="EUR" />

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
placeholder	number null	0	Overrides the default placeholder. Setting the value to a number will display it as formatted. Setting it to null will not show a placeholder
isNegativeAllowed	boolean	true	If false, forces formatting only to positive values and ignores --positive and --negative styling modifiers
fractionDigits	number	2	Sets maximumFractionDigits in Intl.NumberFormat() constructor used for formatting the currency. Supported digits: 0 to 20

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
• Comment or upvote 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