weblineindia/ReactJS-Password-Input

Repository files navigation

ReactJS based Password component to add password as a text/password property with validation. The password value is automatically validated on blur event. You can also disable and hide password field using disable and hide props.

ChromeFirefoxSafariEdgeIE
83.0 ✔77.0 ✔13.1.1 ✔83.0 ✔11.9 ✔

Install the npm package:

npm install react-weblineindia-password
#OR
yarn add react-weblineindia-password

Use the <react-weblineindia-password> component:

import React ,{ Component } from 'react';
import Password from 'react-weblineindia-password'

const Test = () => {
  const [vData, setVData] = useState("");
  const [isShowPassword, setIsShowPassword] = useState(true);

  const onChange = (event) => {
    setVData(event.target.value);
  };

  return (
    <div>
      <Password
        id="password"
        name="password"
        value={vData}
        onChange={onChange}
        placeholder="Password"
        isViewPassword={isShowPassword}
  
      />
    </div>
  );
};

export default Test;
PropTypedefaultDescription
maxlengthNumber255max length for password
passwordErrorMsgStringThe password field must be at least 3 characterserror Msg for password
placeholderStringpasswordpassword placeholder
disabledBooleanfalsedisable password field
nameStringpasswordname for password field
tabindexNumber1password tabIndex
idStringpasswordname for password field
hideBooleanfalsefor hide password field
isViewPasswordBooleantrueTo hide/show eye icon
valueStringvalue for password
hideBooleanfalsefor hide password field
passwordMinValueNumber3For password field minimum value
classnameobjectClass to the input
NameDescription
onFocusGets triggered when the autocomplete input field receives focus.
onBlurGets triggered when the autocomplete input field loses focus.
onChangeGets triggered when the autocomplete results got changed.
onKeypressGets triggered when a key gets pressed.
onKeyDownGets triggered when a key gets down.
onKeyUpGets triggered when a key gets up.
  • Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
  • Fork it.
  • Create new branch to contribute your changes.
  • Commit all your changes to your branch.
  • Submit a pull request.

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development


Detailed changes for each release are documented in CHANGELOG.md.

MIT

react-weblineindia-password, password-input, reactjs-password, react-password-input, react-password, react-input-field, input-field

About

ReactJS based Password component to add password as a text/password property with validation. The password value is automatically validated on blur event. You can also disable and hide password field using disable and hide props.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published