Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhadip/svelte-otp
OTP Input Component for Svelte
https://github.com/shubhadip/svelte-otp
component javascript library masked-inputs otp otp-input otp-verification otpauth svelte svelte3 typescript vite vitejs
Last synced: 28 days ago
JSON representation
OTP Input Component for Svelte
- Host: GitHub
- URL: https://github.com/shubhadip/svelte-otp
- Owner: shubhadip
- License: mit
- Created: 2022-09-03T13:25:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-03T14:43:31.000Z (about 2 years ago)
- Last Synced: 2024-10-05T06:31:35.105Z (about 1 month ago)
- Topics: component, javascript, library, masked-inputs, otp, otp-input, otp-verification, otpauth, svelte, svelte3, typescript, vite, vitejs
- Language: JavaScript
- Homepage:
- Size: 1.15 MB
- Stars: 14
- Watchers: 5
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Otp
[](https://app.travis-ci.com/shubhadip/svelte-otp)
[](https://codecov.io/gh/shubhadip/svelte-otp)
[](https://app.netlify.com/sites/svelte-otp/deploys)
A Otp Component that can be used with Svelte.
# Install
``` bash
npm install svelte-otp --save
yarn add svelte-otp
```
- [Demo](#demo)
- [Usage](#usage)
- [Props](#available-props)
- [Events](#events)
## Demo
To view a demo online:
To view demo examples locally clone the repo and run `npm install && npm run dev`
``` javascript
import OtpInput from 'svelte-otp';
// main
```
## Usage
``` html
```
***numberOfInputs* prop**
``` html
```
***numberOfInputs* along with *separator*prop**
``` html
```
**Using *numberOfInputs*, *separator* and *placeholder* props**
``` html
```
**Masking Input**
``` html
```
**Change Focus on Input/Delete**
``` html
```
**Programtic Access of value of Otp**
```html
let otpInstance: {getValue: () => void};
function handleClick() {
console.log('value on click',
otpInstance?.getValue());
}
...
```
**Prefill value on some other events/actions**
``` html
function callbackFunction(event: CustomEvent) {
console.log('emittedValue', event.detail);
}
function handlePrefill() {
value = '123456';
}
```
**Event on Otp Filled completely**
``` html
function callbackFunction(event: CustomEvent) {
console.log('emittedValue', event.detail);
}
```
## 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 |
| customWrapperClass | string | false | used to style wrapper element of otp |
| customSeparatorClass | string | | used to style separator |
| customRowClass | string | | used to style individual input |
| customInputWrapperClass | string | | used to style input wrapper |
| customTextInputClass | string | | used to style input box |
| emitEventOnPrefill | string | | 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](https://www.github.com/shubhadip)