@tacitknowledge/react-form v1.0.5

React Form

The powerful form which includes validation and behaviours.

Description

React Form - React component which allows you to create different types of Forms. The component includes smart validation engine, behaviors and form grouping.

Installation

// NPM
npm install @tacitknowledge/react-form

// YARN
yarn add @tacitknowledge/react-form

Form

Form - wrapper component that handles the submission and validation of forms.

<Form
    validationRules={...}
    validateOn={['change']}
    submitHandler={(formData) => //...fetch request to save formData}
>
    <Form.Field
       type="password"
       name="password"
       placeholder="Insert Password"
       label="Password"
    />
</Form>

Form props

Form Field

Field - wrapper component that handles the standard form element state and behaviours.

<Form>
    <Form.Field
       type="password"
       name="password"
       placeholder="Insert Password"
       label="Password"
    />
</Form>

Field props

Simple Login Form

import  { Form }  from  '@tacitknowledge/react-form';

const LoginForm = props => {
  return (
    <Form
      submitHandler={props.handleSubmit}
      validateOn={["submit", "blur", "change"]}
      validationRules={props.constrains}
    >
      <Form.Field
        type="email"
        name="email"
        placeholder="Insert Email"
        label="Email"
      />

      <Form.Field
        type="password"
        name="password"
        placeholder="Insert Password"
        label="Password"
      />

      <Form.Submit label="Login" />
    </Form>
  );
};

Behaviors

Behavior - sub component provides flexible way of adding some form behaviors. Built in behaviors (hideIf, showIf, disableIf, ...more to be delivered)

    <Form.Behavior
        showIf="[form field name]"
        equals="[to value]">
        //
    </Form.Behavior>

    <Form.Behavior
        showIf="[form field name]"
        oneOf={['array', 'of', 'values']}>
        ...
    </Form.Behavior>

Behavior props

Example

import  { Form }  from  '@tacitknowledge/react-form';

const LoginForm = props => {
  return (
    <Form
      submitHandler={props.handleSubmit}
      validateOn={["submit", "blur", "change"]}
      validationRules={props.constrains}
    >
      <p>Insert 'test@test'</p>
      <Form.Field
        type="email"
        name="email"
        placeholder="Insert Email"
        label="Email"
      />

      <Form.Behavior showIf="email" equals="test@test">
        <Form.Field
          type="password"
          name="password"
          placeholder="Insert Password"
          label="Password"
        />
      </Form.Behavior>

      <Form.Submit label="Login" />
    </Form>
  );
};