readme.md updated

Author: Konstantin Kulinicenko

README.md

@@ -1,2 +1,53 @@
 # react-code-input
 React component for entering and validating code.
+
+## Installation
+
+`npm i --save react-code-input`
+
+## Usage
+
+### Nummeric input:
+![Nummeric input](https://cloud.githubusercontent.com/assets/2235499/21593670/eafea336-d119-11e6-9d4b-738141f24b44.png)
+```js
+...
+<ReactCodeInput type='number' digits={6} />
+...
+```
+
+### Text input:
+![Text input](https://cloud.githubusercontent.com/assets/2235499/21593708/61cebee2-d11a-11e6-9b8d-e99dbeeec23b.png)
+```js
+...
+<ReactCodeInput type='text' digits={6} />
+...
+```
+### Password input:
+![Password input](https://cloud.githubusercontent.com/assets/2235499/21593710/65ed7252-d11a-11e6-995f-f0127af5bd9f.png)
+```js
+...
+<ReactCodeInput type='password' digits={6} />
+...
+```
+### Nummeric input with options:
+![Nummeric input with options](https://cloud.githubusercontent.com/assets/2235499/21593674/f3bb887c-d119-11e6-8b3f-ba478a0f4692.png)
+```js
+const props = {
+  options: {
+    width: '15px',
+    borderRadius: '3px',
+    fontSize: '14px',
+    height: '26px',
+    paddingLeft: '7px',
+    backgroundColor: 'black',
+    color: 'lightskyblue',
+    border: '1px solid lightskyblue'
+  }
+}
+...
+<ReactCodeInput type='number' digits={6} {...props}/>
+...
+```
+
+## License
+MIT

example/example.js

@@ -5,6 +5,19 @@ import ReactMarkdown from 'react-markdown'
 
 const App = React.createClass({
     render() {
+        const props = {
+          options: {
+            width: '15px',
+            borderRadius: '3px',
+            fontSize: '14px',
+            height: '26px',
+            paddingLeft: '7px',
+            backgroundColor: 'black',
+            color: 'lightskyblue',
+            border: '1px solid lightskyblue'
+          }
+        }
+
         return (<div>
           <h4>Nummeric input</h4>
           <ReactCodeInput type="number" digits={6} />
@@ -27,12 +40,12 @@ const App = React.createClass({
           ```" />
         <h4>Nummeric input with options</h4>
         <div style={{ backgroundColor: 'black', display: 'inline-block' }}>
-        <ReactCodeInput type="number" options={{ width: '15px', borderRadius: '3px', fontSize: '14px', height: '26px', paddingLeft: '7px', backgroundColor: 'black', color: 'lightskyblue', border: '1px solid lightskyblue' }} digits={6} />
+          <ReactCodeInput type="number" digits={6} {...props} />
         </div>
-        <ReactMarkdown source="**Example:**
-        ```
-          <ReactCodeInput type='number' digits={6} options={{ width: '15px', borderRadius: '3px', fontSize: '14px', height: '26px', paddingLeft: '7px', backgroundColor: 'black', color: 'lightskyblue', border: '1px solid lightskyblue' }}/>
-        ```" />
+          <ReactMarkdown source="**Example:**
+          ```
+            <ReactCodeInput type='number' digits={6} {...props}/>
+          ```" />
       </div>);
     }
 });

lib/index.js.map

@@ -14,7 +14,10 @@
   "keywords": [
     "react",
     "react-component",
-    "react-code-input"
+    "react-code-input",
+    "code",
+    "input",
+    "chiffre"
   ],
   "author": "Konstantin Kulinicenko",
   "license": "MIT",

lib/styles.css

@@ -0,0 +1,10 @@
+.react-code-input {
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+  }
+  input[type="number"] {
+      -moz-appearance: textfield;
+  }
+}