@tacitknowledge/react-form
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

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

    Edit React Form - Login

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

    Edit Form Behavior - Login

    Install

    npm i @tacitknowledge/react-form

    DownloadsWeekly Downloads

    15

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    33.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar