Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swaraj55/otp-input
ngx-otp-code-input is a simple Angular component for entering and validating OTP codes. It supports custom lengths, masking, integer-only input, and visual status indicators, making it easy to add OTP functionality to your forms.
https://github.com/swaraj55/otp-input
angular angular-cli angular8 input javascript one-time-password otp typescript web
Last synced: 3 months ago
JSON representation
ngx-otp-code-input is a simple Angular component for entering and validating OTP codes. It supports custom lengths, masking, integer-only input, and visual status indicators, making it easy to add OTP functionality to your forms.
- Host: GitHub
- URL: https://github.com/swaraj55/otp-input
- Owner: Swaraj55
- License: mit
- Created: 2024-08-01T03:12:12.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-27T20:05:19.000Z (4 months ago)
- Last Synced: 2024-10-14T05:40:29.185Z (3 months ago)
- Topics: angular, angular-cli, angular8, input, javascript, one-time-password, otp, typescript, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-otp-code-input
- Size: 812 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ngx-otp-code-input
ngx-otp-code-input is an Angular component for OTP (One-Time Password) input. This component is highly customizable, allowing for various configurations such as masking, integer-only input, autofocus, and more.
If you like the library, please consider giving it a ⭐ on GitHub.
## Features
- Customizable Length: Specify the number of OTP input fields.
- Masking: Hide input values, useful for password-like behavior.
- Integer Only: Restrict input to only integers.
- Autofocus: Automatically focus on the first input field.
- Read-only and Disabled States: Make the input fields read-only or disabled.
- Tab Index: Control tab navigation between input fields.
- Events: Emit events on OTP change and completion.
- Success/Error Status Feedback: Visually indicate the result of OTP verification with customizable icons and colors.
- Animated Transitions: Smooth transitions or animations when focusing between OTP input fields.
## Installation
Install the package via npm:
```bash
npm install ngx-otp-code-input
```
## Usage
#### Import the Module
Add **NgxOtpCodeInputModule** to your Angular module:
```javascript
import { NgxOtpCodeInputModule } from 'ngx-otp-code-input';
@NgModule({
declarations: [
// your components
],
imports: [
// other modules
NgxOtpCodeInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
#### Use the Component in Your Template
Add the **ngx-otp-code-input** component to your template:
```javascript
[status]="otpStatus"
[successIcon]="'check_circle'"
[failureIcon]="'cancel'"
[tabIndex]="true"
(otpChange)="onOtpChange($event)"
(otpComplete)="onOtpComplete($event)"
>
```
#### Handle Events in Your Component
Add event handlers in your component:
```javascript
export class AppComponent {
otpStatus: 'success' | 'failed' | null = null;
onOtpComplete(event: string): void {
console.log('OTP Complete:', event);
}
onOtpChange(event: string): void {
console.log('OTP Change:', event);
}
}
```
## Configuration
#### Inputs
| Input | Type | Default | Description |
| :-------- | :------- | :-------- | :----------------------|
| `length` | `number` | **4** | Number of OTP input fields. |
| `mask` | `boolean` | **false** | Hide the input values (like a password field).|
| `integerOnly` | `boolean` | **false** | Restrict input to only integer values.|
| `disabled` | `boolean` | **false** | Disable the input fields.|
| `readonly` | `boolean` | **false** | Make the input fields read-only.|
| `autofocus` | `boolean` | **true** | Automatically focus on the first input field.|
| `tabIndex` | `boolean` | **false** | Enable tab navigation between input fields.|
| `inputClass` | `string` | **''** | Custom CSS class for the input fields.|
| `variant` | `MatFormFieldAppearance` | **'outline', 'fill'** | Appearance of the Material form field.|
| `regex` | `string` | **''** | Custom regex pattern for the input fields.|
| `status` | `any` | **null** | Visual status of OTP verification.|
| `successIcon` | `string` | **'check_circle'** | Custom icon for success status.|
| `failureIcon` | `string` | **'error'** | Custom icon for failure status.|
| `animationConfig` | `{ type: string, duration: string }` | **{ type: 'slide', duration: '1.0s' }** | Configuration for animations when focusing between input fields.|
#### Outputs
| Output | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `otpChange` | `EventEmitter` | Emits the current OTP value when it changes |
| `otpComplete` | `EventEmitter` | Emits the OTP value when all fields are filled. |
## Contributing
Contributions are welcome! Please submit a pull request or open an issue to discuss changes. 🚀
## License
[MIT](https://github.com/Swaraj55/otp-input/blob/master/LICENSE)