Svelte Custom Components

This is library for Vanilla Svelte custom components with TS. Which Making your task easy to implement.

<script>

    import CurrencyInput from "svelte-custom-components/CurrencyInput.svelte";

</script>

<CurrencyInput value={0} />

Installation

This module is for Svelte project only.

Before installing this, make sure your project is ready to run.

Install this module using following command.

$ npm i svelte-custom-components

Features

• Ready to use components
• Supports 2-way binding
• Fully customizable components

Components

1. CurrencyInput

---

CurrencyInput

• Currency input is component for currency value.
• It will only accept Numeric value and also supports Decimal

Variables Accepted

Name	Type	Default
value	nullable | number	0
placeholder	nullable | string	null
max	number	999999999999999
min	number	0
scale	number	0
customStyle	string	''
customClass	string	''

Methods Dispatch

Name	Type	Return data
change	nullable | number	Updated value of CurrencyInput
Please do handle this above Dispatch if you are using Scale > 0.

Example

• Simple Currency Input demo

<script>
    import CurrencyInput from "svelte-custom-components/CurrencyInput.svelte";

    let myValue = 0;
    let placeholder = "Enter currency here.";

</script>

<CurrencyInput bind:value={myValue} placeholder={placeholder}></CurrencyInput>
<br/>
myValue = {myValue}

• Advance Currency Input demo

<script>
    import CurrencyInput from "svelte-custom-components/CurrencyInput.svelte";

    let value = 0;
    let placeholder = "Enter currency here.";
    let scale = 2;
    let min = 0;
    let max = 1000000;

    function handleChange(newValue:any)
    {
        value = newValue.detail
    }
    
</script>

<CurrencyInput bind:value {placeholder} {scale} {min} {max} on:change={handleChange}></CurrencyInput>
<br/>
value = {value}