Skip to content

Commit 92dc80f

Browse files
committed
final changes
1 parent c223a58 commit 92dc80f

5 files changed

Lines changed: 59 additions & 28 deletions

File tree

README.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
1-
# react-password-toggle-icon
1+
# react-password-toggle-icon
2+
3+
A lightweight package to toggle password visibility on click of the icon. you nee to pass hide-show icon and ref of input field that's it and this package will toggle password visibility.
4+
5+
# Usage
6+
7+
### Code
8+
9+
``` js
10+
11+
<div style={{position:"relative"}}>
12+
<input ref={inputRef} type="password" placeholder="password" />
13+
<ReactPasswordToggleIcon inputRef={inputRef} {...props}/>
14+
</div>
15+
```
16+
17+
as per above code you need to follow three steps:
18+
- create div and give it position: relative css
19+
- create input and give assign ref to it and place it in div which we have created in previous step
20+
- now import react-password-toggle-icon place it in same div and pass inputRef prop whose value is set to inputfield ref
21+
22+
cheers!!
23+

index.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import React from 'react';
22
import App from './src/app';
3-
import ReactDOM from 'react-dom';
43
const Index = (props) => {
5-
let inputRef = React.createRef();
64
return (
7-
<div>
8-
<input ref={inputRef} type="password" placeholder="password" />
9-
<App inputRef={inputRef} {...props}/>
10-
</div>
5+
<App {...props}/>
116
);
127
};
138

14-
ReactDOM.render(<Index />, document.getElementById('root'));
15-
// export default Index;
9+
export default Index;

package.json

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
11
{
22
"name": "react-password-toggle-icon",
3-
"version": "0.0.4",
3+
"version": "1.1.0",
44
"description": "a lightweight password hide show package",
55
"main": "dist/index.js",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/psd8/react-password-toggle-icon"
99
},
1010
"scripts": {
11-
"dev": "webpack --watch",
11+
"dev": "webpack ",
1212
"build": "webpack",
1313
"test": "echo \"Error: no test specified\" && exit 1"
1414
},
1515
"keywords": [
16-
"Password",
16+
"Show-Hide-Password",
17+
"Password-Mask",
1718
"Password-icon",
18-
"react",
19-
"react-password-toggle",
20-
"react-password-mask",
21-
"react-password-hide-show",
22-
"toggle passowrd"
19+
"React-Password-Mask",
20+
"React-Password-toggle",
21+
"React-Password-Hhide-Show",
22+
"Show-Hide-Password-Eye",
23+
"Show-Hide-Password-Icon",
24+
"Show-Hide-Password-Input"
2325
],
2426
"files": [
2527
"dist"
2628
],
2729
"author": "Prashant Shah <mrprashantshah@gmail.com>",
28-
"license": "ISC",
30+
"license": "MIT",
2931
"devDependencies": {
3032
"@babel/core": "^7.11.6",
3133
"@babel/plugin-transform-react-jsx": "^7.10.4",

src/app.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import propTypes from 'prop-types';
33

44
const defaultStyle={
5-
width:"16px",
6-
height:"16px",
5+
width:"auto",
6+
height:"auto",
77
position:"absolute",
88
right:"10px",
99
top:"0",
@@ -20,7 +20,12 @@ class App extends React.PureComponent {
2020
isVisible: false
2121
}
2222
}
23-
23+
componentDidMount(){
24+
this.props.isVisible ?
25+
this.setState({
26+
isVisible:this.props.isVisible
27+
}) : null;
28+
}
2429
handleClick(inputRef){
2530
this.setState({
2631
isVisible : !this.state.isVisible
@@ -35,11 +40,13 @@ class App extends React.PureComponent {
3540
showIcon,
3641
hideIcon,
3742
inputRef,
38-
style
43+
style,
44+
parentClassName
3945
} = this.props;
46+
console.log(typeof inputRef);
4047
const {isVisible} = this.state;
4148
return (
42-
<div onClick={() => this.handleClick(inputRef)} style={{...defaultStyle,...style}}>
49+
<div className={"react-password-toggle-icon-wrapper"+" "+parentClassName} onClick={() => this.handleClick(inputRef)} style={{...defaultStyle,...style}}>
4350
{!isVisible ? hideIcon : showIcon}
4451
</div>
4552
);
@@ -50,10 +57,15 @@ export default App;
5057

5158
App.defaultProps = {
5259
showIcon:"Hide",
53-
hideIcon:"Show"
60+
hideIcon:"Show",
61+
inputRef:"",
62+
parentClassName: "",
63+
isVisible:"false"
5464
}
5565
App.propTypes = {
5666
showIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired,
57-
hideIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired
58-
67+
hideIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired,
68+
inputRef:propTypes.object.isRequired,
69+
parentClassName: propTypes.string,
70+
isVisible:propTypes.bool
5971
}

webpack.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
var path = require("path");
22

33
module.exports = {
4-
mode: "development",
4+
mode: "production",
55
entry: "./index.js",
66
output: {
77
path: path.resolve("dist"),
88
filename: "index.js",
9-
// libraryTarget: "commonjs2"
9+
libraryTarget: "commonjs2"
1010
},
1111
module: {
1212
rules: [
@@ -17,4 +17,5 @@ module.exports = {
1717
}
1818
]
1919
},
20+
devtool: false
2021
};

0 commit comments

Comments
 (0)