Svelte Custom Components

jinkalr

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

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}

Top categories