final changes

Author: psd8

README.md

@@ -1 +1,23 @@
-# react-password-toggle-icon
+# react-password-toggle-icon
+
+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.
+
+# Usage
+
+### Code
+
+``` js
+
+    <div style={{position:"relative"}}>
+        <input ref={inputRef} type="password" placeholder="password" />
+        <ReactPasswordToggleIcon inputRef={inputRef} {...props}/>
+    </div>
+```
+
+as per above code you need to follow three steps:
+- create div and give it position: relative css
+- create input and give assign ref to it and place it in div which we have created in previous step
+- now import react-password-toggle-icon place it in same div and pass inputRef prop whose value is set to inputfield ref
+
+cheers!!
+

index.js

@@ -1,15 +1,9 @@
 import React from 'react';
 import App from './src/app';
-import ReactDOM from 'react-dom';
 const Index = (props) => {
-    let inputRef = React.createRef();
     return (
-        <div>
-            <input ref={inputRef} type="password" placeholder="password" />
-            <App inputRef={inputRef} {...props}/>
-        </div>
+        <App {...props}/>
     );
 };  
 
-ReactDOM.render(<Index />, document.getElementById('root'));
-// export default Index;
+export default Index;

package.json

@@ -1,31 +1,33 @@
 {
   "name": "react-password-toggle-icon",
-  "version": "0.0.4",
+  "version": "1.1.0",
   "description": "a lightweight password hide show package",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/psd8/react-password-toggle-icon"
   },
   "scripts": {
-    "dev": "webpack --watch",
+    "dev": "webpack ",
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "Password",
+    "Show-Hide-Password",
+    "Password-Mask",
     "Password-icon",
-    "react",
-    "react-password-toggle",
-    "react-password-mask",
-    "react-password-hide-show",
-    "toggle passowrd"
+    "React-Password-Mask",
+    "React-Password-toggle",
+    "React-Password-Hhide-Show",
+    "Show-Hide-Password-Eye",
+    "Show-Hide-Password-Icon",
+    "Show-Hide-Password-Input"
   ],
   "files": [
     "dist"
   ],
   "author": "Prashant Shah <mrprashantshah@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/plugin-transform-react-jsx": "^7.10.4",

src/app.js

@@ -2,8 +2,8 @@ import React from 'react';
 import propTypes from 'prop-types';
 
 const defaultStyle={
-    width:"16px",
-    height:"16px",
+    width:"auto",
+    height:"auto",
     position:"absolute",
     right:"10px",
     top:"0",
@@ -20,7 +20,12 @@ class App extends React.PureComponent {
             isVisible: false
         }
     }
-        
+    componentDidMount(){
+        this.props.isVisible ?
+        this.setState({
+            isVisible:this.props.isVisible
+        }) : null;
+    }
     handleClick(inputRef){
         this.setState({
             isVisible : !this.state.isVisible
@@ -35,11 +40,13 @@ class App extends React.PureComponent {
             showIcon,
             hideIcon,
             inputRef,
-            style
+            style,
+            parentClassName
         } = this.props;
+        console.log(typeof inputRef);
         const {isVisible} = this.state;
         return (
-            <div onClick={() => this.handleClick(inputRef)} style={{...defaultStyle,...style}}>
+            <div className={"react-password-toggle-icon-wrapper"+" "+parentClassName} onClick={() => this.handleClick(inputRef)} style={{...defaultStyle,...style}}>
                 {!isVisible ?  hideIcon : showIcon}
             </div>
         );
@@ -50,10 +57,15 @@ export default App;
 
 App.defaultProps = {
     showIcon:"Hide",
-    hideIcon:"Show"
+    hideIcon:"Show",
+    inputRef:"",
+    parentClassName: "",
+    isVisible:"false"
 }
 App.propTypes = {
     showIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired,
-    hideIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired
-
+    hideIcon:propTypes.oneOfType([propTypes.string,propTypes.func]).isRequired,
+    inputRef:propTypes.object.isRequired,
+    parentClassName: propTypes.string,
+    isVisible:propTypes.bool
 }

webpack.config.js

@@ -1,12 +1,12 @@
 var path = require("path");
 
 module.exports = {
-  mode: "development",
+  mode: "production",
   entry: "./index.js",
   output: {
     path: path.resolve("dist"),
     filename: "index.js",
-    // libraryTarget: "commonjs2"
+    libraryTarget: "commonjs2"
   },
   module: {
     rules: [
@@ -17,4 +17,5 @@ module.exports = {
       }
     ]
   },
+  devtool: false
 };