import React from 'react'
import ReactDOM from 'react-dom'
 
// Import package
import { Form, Input, Textarea } from 'rfv'
 
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email: [
    {
      rule: 'isEmail',
      invalidFeedback: 'Please provide a valid email'
    }
  ],
  message: [
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a message'
    }
  ]
}
 
const App = () => {
  // Learn the status of validation with `res.isFormValid` and get your form data as an object with `res.items` to make an AJAX request or something else
  const onSubmit = (res) => {
    if (res.isFormValid) {
      post('url', res.items)
    }
  }
 
  return (
    // Build your form
    <Form onSubmit={onSubmit}>
      <div>
        <Input
          type='email'
          name='email'
          validations={validations.email} />
      </div>
 
      <div>
        <Textarea
          name='message'
          validations={validations.message} />
      </div>
 
      <div>
        <button>Submit</button>
      </div>
    </Form>
  )
}
 
ReactDOM.render(<App />, document.getElementById('root'))

import React from 'react'
import ReactDOM from 'react-dom'
 
// Import package
import { Form, Input, Textarea } from 'rfv'
 
// Create validation rules (https://github.com/chriso/validator.js#validators)
const validations = {
  email: [
    {
      rule: 'isEmail',
      invalidFeedback: 'Please provide a valid email'
    }
  ],
  message: [
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a message'
    }
  ]
}
 
const App = () => {
  // After an AJAX call, call the `res.data` to get the backend results
  const postSubmit = (res) => {
    console.log(res.data)
  }
 
  return (
    // Build your form
    <Form
      postSubmit={postSubmit}
      postOptions={{ method: 'post', url: 'url' }}>
      <div>
        <Input
          type='email'
          name='email'
          validations={validations.email} />
      </div>
 
      <div>
        <Textarea
          name='message'
          validations={validations.message} />
      </div>
 
      <div>
        <button>Submit</button>
      </div>
    </Form>
  )
}
 
ReactDOM.render(<App />, document.getElementById('root'))

// Since RFV uses Axios for HTTP requests, whatever you pass into postOptions prop except `data: {}`, directly goes into Axios
<Form
  runValidation={true|false}
  postOptions={{
    url: 'url',
    method: 'post',
    headers: {
      'Authorization': 'Token ...'
    }
  }}>

<Form
  preSubmit={(res) => {
    // res.e
    // res.items
    // res.setItems({})
  }}
  onSubmit={(res) => {
    // res.e
    // res.items
    // res.isFormValid
    // res.setItems({})
  }}
  postSubmit={(res) => {
    // res.e
    // res.data
    // res.error
    // res.items
    // res.isFormValid
    // res.setItems({})
    // res.isPostSubmitFormValid
  }}>

// You can pass more than one validation
<Input
  validations={[
    {
      rule: 'isLength',
      args: { min: 1 },
      invalidFeedback: 'Please provide a username'
    },
    {
      rule: 'isLength',
      args: { min: 4, max: 32 },
      invalidFeedback: 'Username must be minimum 4, maximum 32 characters'
    }
  ]} />

<Input
  onChange={(res) => {
    // res.e
    // res.validated
  }} />