@codersandip/svelte-otp

A Svelte component for creating OTP (One-Time Password) inputs. This component allows for customizable OTP input length, supports different input types, and handles various user interactions such as input, paste, and backspace events.

Screenshot

Features

• Customizable OTP Input Length: Set the number of OTP input fields.
• Supports Different Input Types: Choose between text and number input types.
• Configurable Placeholder: Set a custom placeholder for the input fields.
• CSS Class Customization: Apply custom CSS classes for styling.
• Automatic Focus Management: Automatically focuses the next input field as the user types.

Installation

To install the package, use npm or yarn:

npm install @codersandip/svelte-otp

or

yarn add @codersandip/svelte-otp

Usage

Import the OTP component into your Svelte application and use it as follows:

<script>
  import {OtpInput} from '@codersandip/svelte-otp';

  let otpValue = '';

  function handleOtpChange(newOtpValue) {
    otpValue = newOtpValue;
  }
</script>

<OtpInput
  length={6}
  inputType="number"
  placeholder="•"
  value={otpValue}
  onChange={handleOtpChange}
  inputWrapClass="custom-inputwrapper-class"
  inputClass="custom-input-class"
  containerClass="custom-container-class"
/>

Props

| Prop Name | Type | Default | Required | Description | | ---------------- | ------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------------------ | | length | number | 6 | No | The number of OTP input fields. | | inputType | "text" | "number" | "password" | "tel" | "number" | No | The type of input field. | | placeholder | string | "•" | No | The placeholder text for the input fields. | | value | string | "" | No | The initial value of the OTP input fields. | | inputWrapClass | string | "" | No | Custom CSS class for the input wrapper div. | | inputClass | string | "" | No | Custom CSS class for the input fields. | | containerClass | string | "" | No | Custom CSS class for the container. | | onChange | function | N/A | Yes | Callback function called with the current OTP value whenever it changes. |

Styling

Customize the appearance of the OTP inputs using the provided CSS classes or by adding your own styles. For example:

.custom-inputwrapper-class {
  /* Custom styles for the input wrap div */
}
.custom-input-class {
  /* Custom styles for the input fields */
}

.custom-container-class {
  /* Custom styles for the container */
}

Development

To build and test the package locally:

Clone the Repository:

git clone https://github.com/codersandipdas/svelte-otp.git
cd svelte-otp

Install Dependencies:

npm install

Build the Package:

npm run build

Link the Package Locally (for Testing):

npm link

Use the Linked Package in Your Svelte Project:

npm link @codersandip/svelte-otp

Contributing

Contributions are welcome! If you have suggestions or improvements, please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.