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

| prop | description | |--|--| | submitHandler | form submit handler | | submitSuccess | form submit success handler | | submitError | form submit error handler | | validationRules | validation constrains to be attached to validation engine | | validateOn | array of available validation hooks ['submit', 'blur', 'change'] |

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

| prop | description | |--|--| | type | [string] - Determine type of input | | name | [string] - Unique filed name | | placeholder | [string] - Field placeholder | | value | [string] - Predefined value | | label | [string] - Field label |

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

| prop | description | |--|--| | hideIf | hide the elements inside Behavior section | | showIf | show the elements inside Behavior section | | disableIf | disable the elements inside Behavior section | | equals | value to be compared with form field provided in behaviour type prop | | oneOf | array of values to be compared with form field provided in behaviour type prop | | contains | checks if form field value contains substring |

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>
  );
};