Gathering detailed insights and metrics for react18-otp-input
Installations
npm install react18-otp-inputDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.15.1
NPM Version
8.11.0
Contributors
1
Unable to fetch Contributors
Languages
3
JavaScript
CSS
HTML
JavaScript (79.45%)
CSS (17.63%)
HTML (2.92%)
Developer
mahdimhqq
Download Statistics
Total Downloads
74,194
Last Day
40
Last Week
349
Last Month
4,041
Last Year
36,166
GitHub Statistics
1 Stars
11 Commits
1 Forks
1 Watching
2 Branches
1 Contributors
Bundle Size
8.39 kB
Minified
3.07 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.3
Package Id
react18-otp-input@1.0.3
Unpacked Size
24.90 kB
Size
7.71 kB
File Count
5
NPM Version
8.11.0
Node Version
16.15.1
Total Downloads
Cumulative downloads
Total Downloads
74,194
Last day
-86.9%
40
Compared to previous day
Last week
-83.3%
349
Compared to previous week
Last month
-2.7%
4,041
Compared to previous month
Last year
35.9%
36,166
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
24
@babel/cli@babel/core@babel/eslint-parser@babel/preset-env@babel/preset-reactbabel-loaderconcurrentlycss-loadereslinteslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hooksgh-pageshtml-webpack-pluginprettierreactreact-domstyle-loaderwebpackwebpack-cliwebpack-dev-server
Versions
react18-otp-input
A fully customizable, one-time password input component for the web built with React. This package is based on great work of contributers of react-otp-input. But i needed this package and for unknown reasons the contributers of the original package does not accept the open PRs that solve the REACT 18 dependency problem. So based on The PR here i created this package for the others who need this.
To see the original package Click
Installation
To install the latest stable version:
npm install --save react18-otp-input
Basic usage:
1import React, { useState } from 'react'; 2 3import OtpInput from 'react18-otp-input'; 4 5function App() { 6 const [otp, setOtp] = useState(''); 7 8 return ( 9 <OtpInput 10 inputStyle="inputStyle" 11 numInputs={4} 12 onChange={(value) => setOtp(value)} 13 separator={<span>-</span>} 14 isInputNum={true} 15 shouldAutoFocus 16 value={otp} 17 /> 18 ); 19} 20 21export default App;
API
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| numInputs | number | true | 4 | Number of OTP inputs to be rendered. |
| onChange | function | true | console.log | Returns OTP code typed in inputs. |
| 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. |
| 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. |
Development
To run the development server:
npm run dev
License
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Mahdi Mohaqeq 💻🚧 🤔 👀 |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
No security vulnerabilities found.