keep index js/html for dev

Mateusz Wijas · Mateusz Wijas · commit 7727f5ca3f0c · 2018-10-29T16:16:44.000+01:00
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>React Password Strength Example</title>
+
+    <style media="screen">
+      body {
+        background: #e6e6e6;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      #example {
+        background: #fff;
+        margin: 50px auto 30px;
+        min-height: 250px;
+        padding: 45px 75px;
+        width: 500px;
+      }
+
+      label {
+        display: inline-block;
+        margin-bottom: 10px;
+      }
+
+      button {
+        background: #fff;
+        border: none;
+        color: #6e6e6e;
+        font-size: 16px;
+        padding: 5px 8px;
+        margin-top: 10px;
+        opacity: 1;
+        transition: opacity 250ms ease-in-out;
+      }
+
+      button:hover,
+      button:focus {
+        cursor: pointer;
+        outline: none;
+      }
+
+      button:disabled {
+        opacity: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="example"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/example/index.js b/example/index.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactPasswordStrength from "../dist/index";
+
+class App extends React.Component {
+  state = {
+    passLength: 0,
+  }
+
+  changeCallback = state =>
+    this.setState({ passLength: state.password.length })
+
+  clear = () => this.ReactPasswordStrength.clear()
+
+  render() {
+    const inputProps = {
+      placeholder: "Try a password...",
+      id: "inputPassword",
+      autoFocus: true,
+      className: 'another-input-prop-class-name',
+    };
+
+    return (
+      <div>
+        <h1>React Password Strength Tool</h1>
+        <p>Powered by <a href="https://github.com/dropbox/zxcvbn" target="_blank">zxcvbn</a></p>
+
+        <ReactPasswordStrength
+          ref={ref => this.ReactPasswordStrength = ref}
+          minLength={6}
+          inputProps={inputProps}
+          changeCallback={this.changeCallback}
+        />
+
+        <button onClick={this.clear} disabled={this.state.passLength === 0}>
+          Clear
+        </button>
+
+        <h3>Password Input with Default Value for password</h3>
+
+        <ReactPasswordStrength
+          minLength={6}
+          inputProps={inputProps}
+          defaultValue="defaultValue"
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("example"));
