0.1.5 • Published 2 years ago
rc-otp-input v0.1.5
otp-input-react
A fully customizable otp component.
Features
- Invalid and disabled state
- Flexible input separators based on index
- Flexible focus styling state
- Numeric and alphanumeric support @todo accept regex validation
- Default values for maintaining form states
Installation
npm install --save rc-otp-inputor if you are using yarn :
yarn add rc-otp-inputUsage:
import Otp from "rc-otp-input";
function App() {
const [OTP, setOTP] = useState("");
return (
<>
<Otp onChange={setOTP} autoFocus numOfFields={4} type="text" />
</>
);
}Custom separators
const customSeparator = (
<div style={{ marginLeft: "16px", marginRight: "16px" }}> - </div>
);
<OtpInput
numOfFields="8"
separator={[1, 3, 5]}
customSeparator={customSeparator}
/>;API
| api | type | required | default | value | desciption |
|---|---|---|---|---|---|
| numOfFields | number | no | 4 | Number between 2 and 12 | Number of fields to be rendered |
| type | string | no | "text" | "text" , "password" | Change input to password |
| autoFocus | boolean | no | false | false , true | Auto focuses input on page load. |
| isNum | boolean | no | false | false , true | If true allows only numbers |
| onChange | function | no | (value)=>{} | any executable function | returns the values keyed in by user on change |
| defaultValue | string | no | - | String length equivlant to the numOfFields | Takes a string value and spreads it to the number of rendered input |
| separator | arraynumber | - | - | An array of elements Index number | Based on the input index will add a custom seperator after it (to the right) |
| customSeparator | React.ReactNode | - | - | An element | could be an element or a string used to create a custom seperator |
Support
If you like this package please consider giving it a star.
Contributing
Feel Free to contributing or feature request
- Fork it ( https://github.com/raedsalah/rc-otp-input.git/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) @todo - to add commit patterns - Create a new pull request.
License
MIT © Raed Salah