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

Methods Dispatch

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}