@inmortalqueen/svelte-price-formatter

💰 Svelte-price-formatter 💰

• Number to price formatter

  

• Number to price input 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>

  

• Customize style by id:

  <script>
      import { InputPriceFormatter } from "@inmortalqueen/svelte-price-formatter";
  </script>
  
  <InputPriceFormatter id="input-price-formatter" />
  
  <style>
      :global(#price-formatter) {
          color: green;
      }
  </style>