|
1 | | -# ReactJS-Password-Input |
| 1 | +# ReactJS - Password Input |
| 2 | + |
| 3 | +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. |
| 4 | + |
| 5 | +## Table of contents |
| 6 | + |
| 7 | +- [Browser Support](#browser-support) |
| 8 | +- [Demo](#demo) |
| 9 | +- [Getting started](#getting-started) |
| 10 | +- [Usage](#usage) |
| 11 | +- [Available Props](#available-props) |
| 12 | +- [Methods](#methods) |
| 13 | +- [Want to Contribute?](#want-to-contribute) |
| 14 | +- [Collection of Components](#collection-of-components) |
| 15 | +- [Changelog](#changelog) |
| 16 | +- [License](#license) |
| 17 | +- [Keywords](#Keywords) |
| 18 | + |
| 19 | +## Browser Support |
| 20 | + |
| 21 | +|  |  |  |  |  | |
| 22 | +| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | |
| 23 | +| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ | |
| 24 | + |
| 25 | +## Demo |
| 26 | + |
| 27 | +[](https://github.com/weblineindia/ReactJS-Password-Input/password.gif) |
| 28 | + |
| 29 | +## Getting started |
| 30 | + |
| 31 | +Install the npm package: |
| 32 | + |
| 33 | +```bash |
| 34 | +npm install react-weblineindia-password |
| 35 | +#OR |
| 36 | +yarn add react-weblineindia-password |
| 37 | +``` |
| 38 | + |
| 39 | +## Usage |
| 40 | + |
| 41 | +Use the `<react-weblineindia-password>` component: |
| 42 | + |
| 43 | +```js |
| 44 | +import React ,{ Component } from 'react'; |
| 45 | +import Password from 'react-weblineindia-password' |
| 46 | + |
| 47 | +class Test extends Component { |
| 48 | + constructor(props) { |
| 49 | + super(props); |
| 50 | + this.state = { |
| 51 | + vData: "", |
| 52 | + isShowPassword:false |
| 53 | + }; |
| 54 | + // This method is used for handle password input value |
| 55 | + onChange(event){ |
| 56 | + this.setState({ |
| 57 | + vData : event.target.value |
| 58 | + }) |
| 59 | + } |
| 60 | + render(){ |
| 61 | + return ( |
| 62 | + <div> |
| 63 | + <Password |
| 64 | + id="password" |
| 65 | + name="password" |
| 66 | + value ={this.state.vData} |
| 67 | + onChange={this.onChange} |
| 68 | + placeholder ="Password" |
| 69 | + isViewPassword={this.state.isShowPassword} |
| 70 | + onChange={this.onChange.bind(this)} |
| 71 | + /> |
| 72 | + </div> |
| 73 | + )} |
| 74 | +} |
| 75 | +``` |
| 76 | +
|
| 77 | +## Available Props |
| 78 | +
|
| 79 | +| Prop | Type | default | Description | |
| 80 | +| ---------------- | ------- | ------------------------------------------------ | -------------------------------- | |
| 81 | +| maxlength | Number | 255 | max length for password | |
| 82 | +| passwordErrorMsg | String | The password field must be at least 3 characters | error Msg for password | |
| 83 | +| placeholder | String | password | password placeholder | |
| 84 | +| disabled | Boolean | false | disable password field | |
| 85 | +| name | String | password | name for password field | |
| 86 | +| tabindex | Number | 1 | password tabIndex | |
| 87 | +| id | String | password | name for password field | |
| 88 | +| hide | Boolean | false | for hide password field | |
| 89 | +| isViewPassword | Boolean | true | To hide/show eye icon | |
| 90 | +| value | String | | value for password | |
| 91 | +| hide | Boolean | false | for hide password field | |
| 92 | +| passwordMinValue | Number | 3 | For password field minimum value | |
| 93 | +| classname | object | | Class to the input | |
| 94 | +
|
| 95 | +## Methods |
| 96 | +
|
| 97 | +| Name | Description | |
| 98 | +| ---------- | ---------------------------------------------------------------- | |
| 99 | +| onFocus | Gets triggered when the autocomplete input field receives focus. | |
| 100 | +| onBlur | Gets triggered when the autocomplete input field loses focus. | |
| 101 | +| onChange | Gets triggered when the autocomplete results got changed. | |
| 102 | +| onKeypress | Gets triggered when a key gets pressed. | |
| 103 | +| onKeyDown | Gets triggered when a key gets down. | |
| 104 | +| onKeyUp | Gets triggered when a key gets up. | |
| 105 | +
|
| 106 | +## Want to Contribute? |
| 107 | +
|
| 108 | +- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part). |
| 109 | +- [Fork it](http://help.github.com/forking/). |
| 110 | +- Create new branch to contribute your changes. |
| 111 | +- Commit all your changes to your branch. |
| 112 | +- Submit a [pull request](http://help.github.com/pull-requests/). |
| 113 | +
|
| 114 | +--- |
| 115 | +
|
| 116 | +## Collection of Components |
| 117 | +
|
| 118 | +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](https://www.weblineindia.com/software-development-resources.html) |
| 119 | +
|
| 120 | +--- |
| 121 | +
|
| 122 | +## Changelog |
| 123 | +
|
| 124 | +Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). |
| 125 | +
|
| 126 | +## License |
| 127 | +
|
| 128 | +[MIT](LICENSE) |
| 129 | +
|
| 130 | +[mit]: https://github.com/weblineindia/ReactJS-Password-Input/blob/master/LICENSE |
| 131 | +
|
| 132 | +## Keywords |
| 133 | +
|
| 134 | +react-weblineindia-password, password-input, reactjs-password, react-password-input, react-password, react-input-field, input-field |
0 commit comments