3
react18-input-otp
source link: https://www.npmjs.com/package/react18-input-otp
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
react18-input-otp
A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React.
Features
- A fully customisable OTP input package with support of React 18 and Typescript.
- It works great on both react and ionic app. Works like a charm on mobile too.
- You can specify only numeric inputs with inputNum prop.
- Works perfectly with clipboard paste feature on web and mobile.
- The only OTP input package on npm that supports 'enter' key to submit.
- Supports onSubmit optional prop. You do not even need a button to submit.
- You can use this package for phone number inputs too.
- You can use this package for passcode fields too with inputSecure prop.
- You can provide custom css as well as input props to the React18-input-otp.
- 0 dependencies.
- Minzipped size only 3.6 kb.
- No open issues.
- No security bugs.
Installation
To install the latest stable version:
npm install --save react18-input-otp
Basic usage:
As class component
import React, { Component } from 'react';
import OtpInput from 'react18-input-otp';
export default class App extends Component {
state = { otp: '' };
handleChange = (otp) => this.setState({ otp });
render() {
return <OtpInput value={this.state.otp} onChange={this.handleChange} numInputs={6} separator={<span>-</span>} />;
}
}
As functional component with hooks
import React, { useState } from 'react';
import OtpInput from 'react18-input-otp';
export default function ReactOtpInput() {
const [otp, setOtp] = useState('');
const handleChange = (enteredOtp) => {
setOtp(enteredOtp);
};
return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
}
Name |
Type | Required | Default | Description |
---|---|---|---|---|
id | string | false | none | Provide unique id for your OTP input. |
numInputs | number | true | 4 | Number of OTP inputs to be rendered. |
onChange | function | true | console.log | Returns OTP code typed in inputs. |
onSubmit | function | false | none | Returns OTP code on submit. This allows to submit the OTP on enter key too. |
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 . |
separator | component | false | none | Provide a custom separator between inputs by passing a component. For instance, <span>-</span> would add - between each input. |
separateAfter | number | false | 1 | Provide the count to set the separater after every input. For instance, 3 would add - after every third input. |
autoComplete | string | false | off | Provide the autocomplete feature for the input. Now, supports one-time-code as autoComplete. |
ariaLabelOverride | string | false | none | Provide the custom arialabel for the input. |
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. |
focusStyle | style (object) / className (string) | false | none | Style applied or class passed to inputs on focus. |
isDisabled | boolean | false | false | Disables all the inputs. |
disabledStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when disabled. |
hasErrored | boolean | false | false | Indicates there is an error in the inputs. |
errorStyle | style (object) / className (string) | false | none | Style applied or class passed to each input when errored. |
shouldAutoFocus | boolean | false | false | Auto focuses input on initial page load. |
isInputNum | boolean | false | false | Restrict input to only numbers. |
isInputSecure | boolean | false | false | Masks input characters. |
data-cy | string | false | - | Test attribute passed to the inputs. |
data-testid | string | false | - | Test attribute passed to the inputs. |
custom-test-id | string | false | - | Custom test attribute passed to the inputs. |
custom-test-attr | string | false | - | Custom test attribute passed to the inputs. |
inputProps | InputHTMLAttributes | InputHTMLAttributes[] | false | - | Custom input props. |
Development
To run the development server:
npm run dev
Checklist
- [x] Add flowtypes
- [x] Add ESLint, Prettier for code quality
- [x] Add styling support for states including focus/disabled
- [ ] Write tests
Contributing
Feel free to open issues and pull requests!
License
Special Thanks to devfolioco. This project is build on top of react-otp-input.
This project follows the all-contributors specification. Contributions of any kind welcome!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK