svelte-otp v1.0.9

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 OtpInput from 'svelte-otp';

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

Usage

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

numberOfInputs prop

    <OtpInput numberOfInputs={6} />

numberOfInputs along with separatorprop

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

Using numberOfInputs, separator and placeholder props

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

Masking Input

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

Change Focus on Input/Delete

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

Programtic Access of value of Otp

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

Prefill value on some other events/actions

function callbackFunction(event: CustomEvent) {
    console.log('emittedValue', event.detail);
}
function handlePrefill() {
    value = '123456';
}
<OtpInput
		...
        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);
}

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

Available props

Events

Only emitted event.

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

Authors

@shubhadip