@pixelprodev/react-validated-form v1.1.8

React-Validated-Form

This library was created to have a super simple api to implement and interact with forms in your react application. It does not rely on any specific version of react nor does it require an additional library like redux to operate.

The components are linked through a simple context manager (not to be confused with react context, but used in a similar way) that allows the form to become form field aware.

Install

npm install --save @pixelprodev/react-validated-form

Be sure to prefix with @pixelprodev/ when you npm install, or youll install a different library alltogether.

Simple Usage Example

import React from 'react'
import { Form, FormField, FormSubmit } from '@pixelprodev/react-validated-form'

const MyReactFormComponent = () => 
  <Form name='myForm' onSubmit={doSubmitFunc}>
    <div>
      <FormField name='username' type='text' />
      <FormField name='password' type='password' />
    </div>
    <FormSubmit>
      <button>Submit</button>
    </FormSubmit>
  </Form>

Components

Form

import { Form } from '@pixelprodev/react-validated-form'

// Base Form
<Form name='testForm' onSubmit={mySubmitFunc}>
  <div>
    <div>
      <FormField ... />
      <FormField ... />
    </div>
    <SomeComponentWithFormFields />
  </div>
</Form>

FormField

import { FormField } from '@pixelprodev/react-validated-form'

// Text input (required)
  <FormField type='text'
             required
             placeholder='Hello world'
             name='myTestFormField' />

// Text input with custom validator
  <FormField type='text'
             validator={(value) => value === myCondition ? 'Invalid Message' : null}
             placeholder='Hello world'
             name='myTestFormField' />

// Select dropdown with options
  <FormField type='select'
             options: [
               {label: 'option one', value: 1},
               {label: 'option two', value: 2},
             ]
             name='myTestSelectField' />

FormField is the self-contained, self-validating component that does most of the lifting. It support both text inputs as well as selects.

If the Form field is set to required, it will automatically validate empty values as invalid and will block the form from submitting until the values are specified.

If you would like to add more fine-tuning to your validation, provide a function to the validator prop and run your own logic to validate the field's value. If the field is valid, return null or undefined. If the field is invalid, just send back the error message you want to be displayed to help the user correct their error.

FormSubmit

import { FormSubmit } from '@pixelprodev/react-validated-form'

// Trigger to submit form
const SubmitButton = () => 
  <FormSubmit>
    <button>Submit</button>
  </FormSubmit>

FormSubmit's purpose is to provide a hook into the form so we can trigger a submit from clicking on any element passed into it (most often a button). Provide a single child to FormSubmit and style it however you please to fit your application.