https://github.com/siamahnaf/otp-timer
A simple react otp timer component with resend functionality🤷
https://github.com/siamahnaf/otp-timer
nextjs one-time-password otp otp-timer otptimer react react-otp-timer timer
Last synced: 3 months ago
JSON representation
A simple react otp timer component with resend functionality🤷
- Host: GitHub
- URL: https://github.com/siamahnaf/otp-timer
- Owner: siamahnaf
- Created: 2025-01-30T09:38:08.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-05-22T09:00:07.000Z (5 months ago)
- Last Synced: 2025-06-28T02:41:48.495Z (3 months ago)
- Topics: nextjs, one-time-password, otp, otp-timer, otptimer, react, react-otp-timer, timer
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@siamf/otp-timer?activeTab=readme
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @siamf/otp-timer
A simple and customizable react otp timer & input component with typescript support. very simple and more customizable design and smallest bundle size. You can use this component into any react and nextjs projects.
- SSR Friendly
- Customizable
- TypeScript Support
- Smallest Bundle Size(About 13kb)
- Otp Timer & Otp Input Component
## Installation
```shell-script
$ npm i @siamf/otp-timer
```
## Demo
## Usage?
### `OtpTimer` Component
```javascript
import { Otptimer } from "@siamf/otp-timer";
const MyComponent = () => {
const handleResend = () => {
//desired function to be performed on clicking resend button
}
return (
You can resend code in {props.minutes} minutes and {props.seconds} seconds
}
renderButton={(props) =>
Send Code Again
}
/>
);
};
export default MyComponent;
```
### `OtpInput` Component
```javascript
import { useState } from "react";
import { OtpInput } from "@siamf/otp-timer";
export default function App() {
const [otp, setOtp] = useState(");
return (
-}
renderInput={(props) => }
/>
);
}
```
# Customization
## `OtpTimer` component
### Options
|name|Description|Default Value|
|:---:| :-------------:|:-----------:|
|seconds|number of seconds for which timer must be set|30|
|minutes|number of minutes for which the timer must be set|0|
|onResend|function that would get triggered on clicking the resend button|n/a|
|renderText|Customizable text content(See Example Code)|Required|
|renderButton|Customizable button content(See Example Code)|Required|
## `OtpInput` component
Name
Type
Required
Default
Description
numInputs
number
true
4
Number of OTP inputs to be rendered.
renderInput
function
true
none
A function that returns the input that is supposed to be rendered for each of the input fields.
The function will get two arguments: inputProps and index. inputProps is an object that contains all the props that should be passed to the input being rendered (Overriding these props is not recommended because it might lead to some unexpected behaviour). index is the index of the input being rendered.
onChange
function
true
console.log
Returns OTP code typed in inputs.
onPaste
function
false
none
Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
Example:
const handlePaste: React.ClipboardEventHandler = (event) => {
const data = event.clipboardData.getData('text');
console.log(data)
};
value
string / number
true
''
The value of the OTP passed into the component.
placeholder
string
false
none
Specify an expected value of each input. The length of this string should be equal to numInputs.
renderSeparator
component / function
false
none
Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input. You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.
containerStyle
style (object) / className (string)
false
none
Style applied or class passed to container of inputs.
inputStyle
style (object) / className (string)
false
none
Style applied or class passed to each input.
inputType
<input> type
false
text
The type of the input that will be passed to the input element being rendered. In v2 isInputNum used to set the input type as tel and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type number. That behaviour is still supported if you pass tel to the inputType prop.
shouldAutoFocus
boolean
false
false
Auto focuses input on initial page load.
skipDefaultStyles
boolean
false
false
The component comes with default styles for legacy reasons. Pass true to skip those styles. This prop will be removed in the next major release.
## Issues
You are welcome to create an issue.
## Stay in touch
- Author - [Siam Ahnaf](https://www.siamahnaf.com/)
- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)