Nasty Popsicle Machine

    otp-ui
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    OTP angular UI component

    A fully customizable, one-time password input component with Angular.
    Values of every input parameter in otp object can be changed as per user requirement. If not, default values will be considered.

    Module

    import { OtpUiModule } from 'otp-ui';

    Include in module Section

    imports: [
    ....
    OtpUiModule ]

    Selector

    <lib-otp-ui></lib-otp-ui>

    Input Parameters

    otp = {

    otp_title : 'Enter the OTP', => title to be displayed 
    otp_subtitle : 'OTP will be sent to your registered mobile number, Please verify', => subtitle to be displayed 
    buttonText : 'Validate OTP', => button label to be displayed 
    length : 5, => number of OTP input fields to be displayed 
    

    styles : {

    cardWidth :'50%' => width of the card to be displayed 
    backgroundColor:'gray',=> Background color of the card to be displayed 
    buttonColor:'blue', => Color of the button to be displayed 
    buttonTextColor:'white', => Text color on the button to be displayed 
    head_color:'black', => Text color of the title to be displayed 
    sub_head_color:'black', => Text color of the sub-title to be displayed
    

    }

    }

    Output Parameters

    otpSent: object => Returns Entered values in object format

    {crtl0: '7', crtl1: '9', crtl2: '9', crtl3: '5', crtl4: '9'}

    Example usage

    <lib-otp-ui [otp]="otp" (otpSent)="receiveOTP($event)"></lib-otp-ui>

    Output Example

    alt text

    Example Usage

    Example 1: app.component.ts
    custom_otp_config = {
    length : 5,
    otp_title : 'Enter OTP',
    otp_subtitle : 'OTP will be sent to your registered mobile number, Please verify',
    buttonText : 'Validate OTP',
    styles{ backgroundColor:'orange'
    }
    }

    alt text

    Example 2: app.component.ts
    custom_otp_config = {
    length : 4,
    otp_title : 'Enter OTP',
    otp_subtitle : 'OTP will be sent to your registered mobile number, Please verify',
    buttonText : 'Submit OTP',
    styles{ buttonColor:'ForestGreen',
    head_color:'ForestGreen'
    }
    }

    alt text

    Install

    npm i otp-ui

    DownloadsWeekly Downloads

    15

    Version

    0.1.2

    License

    none

    Unpacked Size

    98.1 kB

    Total Files

    20

    Last publish

    Collaborators

    • siva_sankula_19
    • sindhu_18