First npm release

Author: zackify

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["es2015"],
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+dist

.npmignore

@@ -0,0 +1,4 @@
+example
+.babelrc
+form.js
+README.md

README.md

@@ -0,0 +1,44 @@
+## React Validify
+
+`npm install react-validify`
+
+```js
+import Form from 'react-validify'
+
+<Form rules={{ email: 'email|required', password: 'required|min:8' }}>
+  <Input name="email" />
+  <Input name="password" type="password" />
+
+  <div
+    submit
+    onClick={values =>
+      console.log('this will be called if validation passes', values)}
+  >
+    Submit!
+  </div>
+</Form>
+```
+
+## Usage
+
+This component is the simplest way to validate form inputs in React. There's two things to learn. The Form accepts a prop called `rules`. This is an object with the names of all yours inputs and the rules for them. Rules can be found [here](https://github.com/skaterdav85/validatorjs#available-rules). Place the `submit` prop on any element that you want to trigger the validation. The onClick will not be triggered until the rules pass. If validation fails, error messages will be passed to the inputs as an error prop.
+
+
+Workflow:
+
+1. Import `Form`
+2. Build a wrapper around inputs. It needs to handle when there's an error passed in:
+
+```js
+export default ({ error, ...props }) => {
+  return (
+    <div>
+      <p>{error}</p>
+      <input {...props} />
+    </div>
+  );
+};
+
+```
+3. Add a submit button inside the form with the `submit` prop.
+4. That's it!

example/package-lock.json

@@ -7,7 +7,9 @@
   },
   "dependencies": {
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "react-validify": "0.0.1",
+    "validatorjs": "^3.13.3"
   },
   "scripts": {
     "start": "react-scripts start",

example/package.json

@@ -1,18 +1,24 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+
+import Input from './input';
+import Form from 'react-validify';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <Form rules={{ email: 'email|required', password: 'required|min:8' }}>
+          <Input name="email" />
+          <Input name="password" type="password" />
+
+          <div
+            submit
+            onClick={values =>
+              console.log('this will be called if validation passes', values)}
+          >
+            Submit!
+          </div>
+        </Form>
       </div>
     );
   }