chore: update README

CHANGELOG.md

@@ -1,4 +1,4 @@
-## [0.6.0] - 2018-11-01
+## [0.6.1] - 2018-11-01
 
 ### Added
 - more field types: textarea, number, password, file, date, time, range

README.md

@@ -2,55 +2,53 @@
 
 [![Build Status](https://travis-ci.org/ngduc/ez-react-form.svg?branch=master)](https://travis-ci.org/ngduc/ez-react-form)
 
-Easy React Form - ez-react-form
+A simple way to work with Forms in React.
 
 - Live Demo: [Codesandbox](https://codesandbox.io/s/l5vxk5o7vq)
+- Code examples: [Link](../src/examples)
 
 ### 🌟 Features
 
-[![Screenshot](screenshot-compare.png)](src/EzFormExample.tsx)
-
-- Shorthand syntax `<Field>Label | Placeholder | name</Field>` (yes, child is a string for convenience, props work too but it's up to you) generates more code for you. (inspired by [Styled Component](https://github.com/styled-components/styled-components) literal string for CSS)
-
-Not just shorter syntax, it's also offering:
-- Describe Forms naturally.
-- Consistent rendering, stylings (good for big projects).
-- Layouts (vertical, horizontal).
-- Work with different CSS Frameworks / Form Layouts (tentcss (default), bootstrap, spectre, etc.)
-- More types of fields.
-- Work well together with Formik - use FastField to avoid [too many re-renders](https://twitter.com/jaredpalmer/status/962114095481851910?lang=en)
-
-### 📦 Usage
-
 ```JS
 $ npm install ez-react-form
 import { FormContainer, Form, Field, Button } from 'ez-react-form';
 
 <FormContainer onSubmit={this.onSubmit} render={props => (
   <Form use="bootstrap4">
-    <Field>Email | Enter your email | email</Field>
-    <Field radios options={genders}>Gender | gender</Field>
-    <Field select options={animals}>Favorite Animal | animal</Field>
+    <Field>Text Field | text</Field>
+    <Field password>Password | password</Field>
+    <Field textarea>Textarea | textarea</Field>
+    <Field select options={animals}>Select | select</Field>
+    <Field radios options={genders}>Radios | radio</Field>
+    <Field checkboxes options={roles}>Checkboxes | checkboxes</Field>
+    <Field number>Number | number</Field>
+    <Field date>Date | date</Field>
+    <Field time>Time | time</Field>
+    <Field toggle inline>Toggle | toggle</Field>
+    <Field file>File Upload | file1</Field>
+    <Field file withPreview>File Upload (with Preview) | file2</Field>
+    <Field range>Range | range</Field>
 
     <Button type="submit"/>
     <Button>Cancel</Button>
   </Form>
 )} />
 ```
-- To avoid conflicts, you can also use `import { EzFormContainer, EzForm, EzField, EzButton }`
-- Full code example: [Link](src/EzFormExample.tsx)
-- Live example: [Codesandbox](https://codesandbox.io/s/l5vxk5o7vq)
 
-Result:
+Result: (Full form, validation (with yup) & error messages)
+
+[![Screenshot](screenshot-types.png)](https://codesandbox.io/s/l5vxk5o7vq)
 
-[![Screenshot](screenshot.png)](src/EzFormExample.tsx)
+- Shorthand syntax `<Field>Label | Placeholder | name</Field>` (yes, child is a string for convenience, props work too if you prefer that). Inspired by [Styled Component](https://github.com/styled-components/styled-components) literal string for CSS.
+- Render different form layouts: Bootstrap4, Spectre and more.
+- Compatible with formik. This is built on top of formik and can be used together with it (for custom fields, etc.)
 
 ### 📖 Documentation
 
 [Change Log](/CHANGELOG.md)
 
 TODO:
-- Support: Material, Semantic UI.
+- Support: Material, Semantic UI and more.
 - More field types: Date Range, etc.
 - (File a PR to request any feature, field type, etc.)
 

docs/features.md

@@ -0,0 +1,61 @@
+# ez-react-form
+
+[![Build Status](https://travis-ci.org/ngduc/ez-react-form.svg?branch=master)](https://travis-ci.org/ngduc/ez-react-form)
+
+Easy React Form - ez-react-form
+
+- Live Demo: [Codesandbox](https://codesandbox.io/s/l5vxk5o7vq)
+
+### 🌟 Features
+
+[![Screenshot](screenshot-compare.png)](../src/examples/BasicExample.tsx)
+
+- Shorthand syntax `<Field>Label | Placeholder | name</Field>` (yes, child is a string for convenience, props work too but it's up to you) generates more code for you. (inspired by [Styled Component](https://github.com/styled-components/styled-components) literal string for CSS)
+
+Not just shorter syntax, it's also offering:
+- Describe Forms naturally.
+- Consistent rendering, stylings (good for big projects).
+- Layouts (vertical, horizontal).
+- Work with different CSS Frameworks / Form Layouts (tentcss (default), bootstrap, spectre, etc.)
+- More types of fields.
+- Work well together with Formik - use FastField to avoid [too many re-renders](https://twitter.com/jaredpalmer/status/962114095481851910?lang=en)
+
+### 📦 Usage
+
+```JS
+$ npm install ez-react-form
+import { FormContainer, Form, Field, Button } from 'ez-react-form';
+
+<FormContainer onSubmit={this.onSubmit} render={props => (
+  <Form use="bootstrap4">
+    <Field>Email | Enter your email | email</Field>
+    <Field radios options={genders}>Gender | gender</Field>
+    <Field select options={animals}>Favorite Animal | animal</Field>
+
+    <Button type="submit"/>
+    <Button>Cancel</Button>
+  </Form>
+)} />
+```
+- To avoid conflicts, you can also use `import { EzFormContainer, EzForm, EzField, EzButton }`
+- Full code example: [Link](../src/examples/BasicExample.tsx)
+- Live example: [Codesandbox](https://codesandbox.io/s/l5vxk5o7vq)
+
+Result:
+
+[![Screenshot](screenshot.png)](../src/examples/BasicExample.tsx)
+
+### 📖 Documentation
+
+[Change Log](/CHANGELOG.md)
+
+TODO:
+- Support: Material, Semantic UI.
+- More field types: Date Range, etc.
+- (File a PR to request any feature, field type, etc.)
+
+### 🙌 Thanks
+
+All contributions are welcome!
+
+[formik](https://github.com/jaredpalmer/formik)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ez-react-form",
-  "version": "0.6.0",
-  "description": "Easy React Form - ez-react-form - your pain ends here",
+  "version": "0.6.1",
+  "description": "A simple way to work with Forms in React",
   "main": "lib/index.js",
   "module": "es/index.js",
   "files": [