react-otp-input-rc-17

v2.4.1-minor

A fully customizable, one-time password input component for the web built with React For more information about how to use this package see README

Latest version published 3 years ago

License: MIT

NPM

GitHub

Package Health Score

51 / 100

security
No known security issues
popularity
Small
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.4.1-minor	\|	10/2021	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (1,874)

GitHub Stars: 670
Forks: 431
Contributors: 50

Direct Usage Popularity

The npm package react-otp-input-rc-17 receives a total of 1,874 downloads a week. As such, we scored react-otp-input-rc-17 popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-otp-input-rc-17, we found that it has been starred 670 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 50
Funding: No

With more than 10 contributors for the react-otp-input-rc-17 repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-otp-input-rc-17 is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 32
Open PR: 11
Last Release: 3 years ago
Last Commit: 1 year ago

Further analysis of the maintenance status of react-otp-input-rc-17 based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for react-otp-input-rc-17 is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 3 years
Dependencies: 0 Direct
Versions: 2
Install Size: 28.5 kB
Dist-tags: 1
# of Files: 5
Maintainers: 1
TS Typings: Yes

react-otp-input-rc-17 has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-otp-input

A fully customizable, one-time password input component for the web built with React.

see here

Live Demo

CodeSandbox

Installation

To install the latest stable version:

npm install --save react-otp-input

Basic usage:

import React, { Component } from 'react';
import OtpInput from 'react-otp-input';

export default class App extends Component {
  state = { otp: '' };

  handleChange = (otp) =&gt; this.setState({ otp });

  render() {
    return (
      -}
      /&gt;
    );
  }
}

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.

Breaking changes when porting to v1.0.0

react-otp-input is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For v1.0.0 and above, a value prop needs to be passed in the component for it to function as expected.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Abhishek Warokar} 💻 🎨 🚧 🤔 👀	_Aj 💻 🎨 🤔	_{Aromal Anil} 💻 🔧	_{Gabriele Corti} 💻 ️️️️♿️	_Anoop 💻	_{Dewansh Rawat} 🐛	_{Ishan Chhabra} 💻
_yaojie 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

FAQs

What is react-otp-input-rc-17?

A fully customizable, one-time password input component for the web built with React. Visit Snyk Advisor to see a full health score report for react-otp-input-rc-17, including popularity, security, maintenance & community analysis.

Is react-otp-input-rc-17 popular?

The npm package react-otp-input-rc-17 receives a total of 1,874 weekly downloads. As such, react-otp-input-rc-17 popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-otp-input-rc-17 well maintained?

We found indications that react-otp-input-rc-17 is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is react-otp-input-rc-17 safe to use?

The npm package react-otp-input-rc-17 was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 21 December-2024, at 10:40 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1,874)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-otp-input

Installation

To install the latest stable version:

Basic usage:

API

Breaking changes when porting to v1.0.0

Development

To run the development server:

Checklist

Contributing

License

Contributors ✨