From 4bfd7e9ccc6b689bc70f97feb215f5a824c98f77 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 18 Oct 2018 20:04:22 +0300
Subject: [PATCH] Add PasswordRevealer

---
 snippets/PasswordRevealer.md | 45 ++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 snippets/PasswordRevealer.md

diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
new file mode 100644
index 000000000..79d2b321f
--- /dev/null
+++ b/snippets/PasswordRevealer.md
@@ -0,0 +1,45 @@
+### PasswordRevealer
+
+Renders a password input field with a reveal button.
+
+Initially set `state.shown` to `false` to ensure that the password is not shown by default.
+Create a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.
+In the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field
+Finally, bind the `<button>`'s `onClick` event to the `toggleShown` method.
+
+```jsx
+class PasswordRevealer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      shown: false
+    };
+    this.toggleShown = this.toggleShown.bind(this);
+  }
+
+  toggleShown() {
+    this.setState(state => ({ shown: !state.shown }));
+  }
+
+  render() {
+    return (
+      <div>
+        <input
+          type={this.state.shown ? 'text' : 'password'}
+          value={this.props.value}
+        />
+        <button onClick={this.toggleShown}>Show/Hide</button>
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
+```
+
+< !--tags: input,state,class -- >
+
+< !--expertise: 0 -- >
+