💰 Svelte-price-formatter 💰
📦 Installation:
npm i @inmortalqueen/svelte-price-formatter
🔧 Configuration
Number to price formatter
-
Default Price:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter /> // $10,000.00
-
Customize price:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter price={200000} /> // $200,000.00 <PriceFormatter price={123456} /> // $123,456.00 <PriceFormatter price={123.45} /> // $123.45
-
Customize locale:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter locale="es-AR" /> // $ 10.000,00 <PriceFormatter locale="es-ES" /> // 10.000,00 € <PriceFormatter locale="ja-JP" /> // ¥10,000.00
-
All locales you can use
LOCALE SYMBOL CURRENCY "en-CA" $ Canadian Dollar "en-GB" £ Pound Sterling "en-US" $ American Dollar "es-AR" $ Argentine Peso "es-ES" € Euro "es-MX" $ Mexican Peso "ja-JP" ¥ Yen "pt-BR" R$ Brazilian Real "pt-PT" € Euro "zh-CN" ¥ Yuan "zh-HK" HK$ Hong Kong Dollar "zh-TW" $ New Taiwan Dollar
-
-
Customize minDecimals:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter minDecimals={0} /> // $10,000 <PriceFormatter minDecimals={1} /> // $10,000.0
-
Customize maxDecimals:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter price={1000.12349} /> // $1,000.12 <PriceFormatter price={1000.12349} maxDecimals={3} /> // $1,000.123 <PriceFormatter price={1000.12349} maxDecimals={4} /> // $1,000.1235 X >= 5 = true --> 9.12349 = 9.1235 <PriceFormatter price={1000.12349} maxDecimals={5} /> // $1,000.12349
-
Customize style:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter style="color: red;" />
-
Customize style by class:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter class="price-formatter" /> <style> :global(.price-formatter) { color: blue; } </style>
-
Customize style by id:
<script> import { PriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <PriceFormatter id="price-formatter" /> <style> :global(#price-formatter) { color: green; } </style>
Number to price input formatter
-
Default Input Price:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter />
-
Customize placeholder:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter placeholder="200000" /> <InputPriceFormatter placeholder="123456" />
-
Customize limit:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter limit={1000} /> <InputPriceFormatter limit={10000.55} />
-
Customize locale:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter locale="es-AR" /> <InputPriceFormatter locale="es-ES" /> <InputPriceFormatter locale="ja-JP" />
-
All locales you can use
LOCALE SYMBOL CURRENCY "en-CA" $ Canadian Dollar "en-GB" £ Pound Sterling "en-US" $ American Dollar "es-AR" $ Argentine Peso "es-ES" € Euro "es-MX" $ Mexican Peso "ja-JP" ¥ Yen "pt-BR" R$ Brazilian Real "pt-PT" € Euro "zh-CN" ¥ Yuan "zh-HK" HK$ Hong Kong Dollar "zh-TW" $ New Taiwan Dollar
-
-
Customize maxDecimals:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter maxDecimals={0} /> <InputPriceFormatter maxDecimals={4} />
-
Customize onChange:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; let onChange = () => { // Your code... } </script> <InputPriceFormatter bind:onChange />
-
Get input value:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; let inputValue; $: console.log(inputValue); </script> <InputPriceFormatter bind:inputValue />
-
Get value:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; let value; $: console.log(value); </script> <InputPriceFormatter bind:value />
-
Customize style:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter style="color: red;" />
-
Customize style by class:
<script> import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter"; </script> <InputPriceFormatter class="input-price-formatter" /> <style> :global(.price-formatter) { color: blue; } </style>