svelte-otp

Svelte Otp

A Otp Component that can be used with Svelte.

Install

npm install svelte-otp --save

yarn add svelte-otp

• Demo
• Usage
• Props
• Events

Demo

To view a demo online: https://svelte-otp.netlify.app/

To view demo examples locally clone the repo and run npm install && npm run dev

import SvelteOtp from 'svelte-otp';

// main 
<SvelteOtp	
    separator="-"
    placeholder="0000"
    ...
/>

Usage

<SvelteOtp	
		separator="-"
		placeholder="0000"
        ...
	/>

numberOfInputs prop

    <SvelteOtp numberOfInputs={6} />

numberOfInputs along with separatorprop

<SvelteOtp numberOfInputs={4} separator="-"  />

Using numberOfInputs, separator and placeholder props

<SvelteOtp separator="-" placeholder="******" numberOfInputs={6}  />

Masking Input

<SvelteOtp separator="-" placeholder="****" numberOfInputs={4} maskInput={true} />

Change Focus on Input/Delete

<SvelteOtp 
	...
	autoFocusNextOnInput={true}
	focusPreviousOnDelete={true}
/>

Programtic Access of value of Otp

    let otpInstance: {getValue: () => void};
    function handleClick() {
        console.log('value on click', 
            otpInstance?.getValue());
    }
	...
<SvelteOtp 
		...
		bind:this={otpInstance}
	/>

Prefill value on some other events/actions

function callbackFunction(event: CustomEvent) {
    console.log('emittedValue', event.detail);
}
function handlePrefill() {
    value = '123456';
}
<SvelteOtp
		...
        bind:initialValue={value}
		on:notify={callbackFunction}
		...
		emitEventOnPrefill={false}
	/>
<div class="button-otp" on:click={handleClick}> Get Value </div>

Event on Otp Filled completely

function callbackFunction(event: CustomEvent) {
    console.log('emittedValue', event.detail);
}

<SvelteOtp
		...
		on:notify={callbackFunction}
		...
		emitEventOnPrefill={false}
	/>

Available props

Prop	Type	Default	Description
numberOfInputs	Number	4	Number of Inputs to be shown
separator	String		separator between inputs
placeholder	String		placeholder for text inputs.
maskInput	Boolean	false	mask input values
autoFocusNextOnInput	Boolean	true	focus on next input after entering value
focusPreviousOnDelete	Boolean	true	move focus to previous element on delete
emitEventOnPrefill	Boolean	false	emits events on filling all input fields

Events

Only emitted event.

eventObj = { completevalue: string; isInputComplete: boolean; }

Event	Output	Description
notify	eventObj	Even is emitted when input is complete

Authors

@shubhadip