updted readme and patches

Author: psd8

README.md

@@ -14,10 +14,31 @@ A lightweight package to toggle password visibility on click of the icon. you ne
     </div>
 ```
 
+### Properties
+-  **inputRef** - this is required props , here you need to supply ref of password input field as this prop val,
+-  **showIcon** - default value for this field is "Show", but here you can pass cutsom funtion which return html of the image tag or icon tag or any icon or text which you want to show.
+-  **hideIcon** - defaut value fot this fied is "Hide", here also you can provide callback function same as the showIcon if you want to render icon or something else as per your need.
+    **here is snippet for your ref**
+    ### Code
+
+``` js
+    const showIcon = () => <i class=""></i>;
+    const hideIcon = () => <i class=""></i>;
+    <ReactPasswordToggleIcon inputRef={inputRef} {...props}/>
+```
+-   **parentClassName** - if you want to add custom class to the icon parent div then you can use this props to pass classname,
+-   **isVisible**: if you want to show password by default on then you can pass bool val true in this prop.
+
+### Steps to integrate
 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!!
+### Code Sandbox link
+[a link](https://codesandbox.io/s/react-password-toggle-icon-forked-rd2xz)
+
+Hope This package will help 😊
+
+cheers 🥂!!
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-password-toggle-icon",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "a lightweight password hide show package",
   "main": "dist/index.js",
   "repository": {

src/app.js

@@ -43,11 +43,13 @@ class App extends React.PureComponent {
             style,
             parentClassName
         } = this.props;
-        console.log(typeof inputRef);
+
         const {isVisible} = this.state;
+        const hideVal = typeof hideIcon === "string" ? hideIcon : hideIcon();
+        const showVal = typeof showVal === "string" ? showIcon : showIcon();
         return (
             <div className={"react-password-toggle-icon-wrapper"+" "+parentClassName} onClick={() => this.handleClick(inputRef)} style={{...defaultStyle,...style}}>
-                {!isVisible ?  hideIcon : showIcon}
+                {isVisible ?  hideVal : showVal}
             </div>
         );
     }