readme draft

Author: snikidev

README.md

@@ -1,7 +1,45 @@
-- label
+- prepare Readme
 - disable style
 - run tests & update snapshots
 - build package
 - deploy package
 - build static site
 - website deploy script
+
+# React Multi Fields Input component
+
+React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
+
+![react-multi-fields-input component](https://github.com/kakuevn/react-multi-fields-input/raw/develop/src/assets/rmfi.png)
+
+Props that MultiFieldsInput component accepts:
+
+```js static
+{
+  inputs: Inputs[];
+  name: string;
+  onBlur(target: Target): void;
+  onChange(target: Target): void;
+  isValid?: boolean;
+  value?: string;
+  autoFocus?: boolean;
+}
+```
+
+`inputs` is an array of objects that are constructed of
+
+```js static
+{
+  type: 'number' | 'text';
+  maxLength: number;
+  placeholder: string;
+  min?: number;
+  max?: number;
+}
+```
+
+The values that are being returned `onBlur` and `onChange` (i.e. `Target` interface):
+
+```js static
+{ name: '', value: ''}
+```

assets/rmfi.PNG

@@ -1,3 +1,5 @@
+React Multi Fields Input component comes with zero styles to allow you style it in accordance to your style guidelines.
+
 Props that MultiFieldsInput component accepts:
 
 ```js static

dist/index.js

@@ -1,3 +1,9 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+.rmfi-container {
+  font-family: 'Open Sans', sans-serif;
+}
+
 .rmfi-input {
   border: 1px solid #ecf0f1;
   padding: 1em 1.5em;
@@ -21,3 +27,9 @@
 .rmfi-error {
   border-color: #e74c3c;
 }
+
+.rmfi-label {
+  display: block;
+  font-size: 0.8em;
+  font-weight: bold;
+}