react-form-typescript v1.0.5

React Form

This library provides an easy way to build forms independent of styling! There is no extra class added to any html element so you might have to apply styling on the native html controls.

Base Components

Following controls are build in for first iteration.

• TextBox
• NumberBox
• Password
• RadioButton
• CheckBox
• SingleFileUplaod
• MultipleFileUpload
• MultiLineTextBox
• SelectBox
• ValidationError

Validation Components

You can create your own validation components as well

• RangeValidation
• RegexValidation
• RequiredValidation

Utility Components

• PlainMarkup
• ShowIf

How it works

The components which are provided as part of react-form framework by default have no validation when form is submitted then all the components which are with in the form there values are provided as FormData which can be passed to backend server for further processing. The moment you add a validation component on top of a normal component it behaves inline with the validation applied.

Following are few examples:

Login Form Example Code snippet

const [payload, setPayload] = React.useState(null)

 const userNameProps: BaseComponentProps = {
   label: "Username",
   name: "user-name",
   id: "user-name",
   placeholder: "Provide Username",
   validationMessage: "Please provide username",
 }

 const passwordProps: BaseComponentProps = {
   label: "Password",
   name: "password",
   id: "password",
   placeholder: "Provide Password",
   validationMessage: "Please provide password",
 }

 const formProps: FormProps = {
   enableOffline: true,
   showValidationSummary: true,
   submitForm: (formData) => {
     fetch(/*api-ul*/, {
       body: formData,
       method: "POST",
     })
       .then((response) => response.json())
       .then(setPayload)
       .catch(console.log)
     console.log("login")
   },
 }
 const requiredValidator1: BaseValidatorProps = { name: "username_required" }
 const requiredValidator2: BaseValidatorProps = { name: "password_required" }

 return (
   <>
     <Form formProps={formProps}>
       <RequiredValidator requiredValidatorProps={requiredValidator1}>
         <TextBox textBoxProps={userNameProps} />
       </RequiredValidator>
       <RequiredValidator requiredValidatorProps={requiredValidator2}>
         <Password passwordProps={passwordProps} />
       </RequiredValidator>
       <div className="button-container">
         <button>Login</button>
       </div>
     </Form>
     {payload && (
       <>
         <h1>Pay load from server :</h1>
         <pre>{JSON.stringify(payload, null, 2)}</pre>
       </>
     )}

Let's try to understand what this is!

• The snippet is as follows:

      const userNameProps: BaseComponentProps = {
          label: "Username",
          name: "user-name",
          id: "user-name",
          placeholder: "Provide Username",
          validationMessage: "Please provide username",
        }

        const requiredValidator1: BaseValidatorProps = { name: "username_required" }
        
        <RequiredValidator requiredValidatorProps={requiredValidator1}>
          <TextBox textBoxProps={userNameProps} />
        </RequiredValidator>

• The important snippet which we need to understand is

const formProps: FormProps = {
    showValidationSummary: true,
    submitForm: (formData:FormData) => {
      fetch(/*api-ul*/, {
        body: formData,
        method: "POST",
      })
        .then((response) => response.json())
        .then(setPayload)
        .catch(console.log)
      console.log("login")
    },
  }

 <Form formProps={formProps}>
.....
</Form>

There are few properties on FormProps we need to understand

Complete Example

import * as React from "react"
import { render } from "react-dom"

import {
  Form,
  TextBox,
  RequiredValidator,
  Password,
} from "react-form-typescript"

const App = () => {
  const formProps = {
    heading: "Login Form",
    showValidationSummary: true,
    submitForm: (formData) => {
      console.log("login")
    },
  }
  const userNameProps = {
    label: "Username",
    name: "user-name",
    id: "user-name",
    placeholder: "Provide Username",
    validationMessage: "Username is required!",
  }
  const userNameRequiredValidator = { name: "userNameRequiredValidator" }

  const passwordProps = {
    label: "Password :",
    name: "password",
    id: "password",
    placeholder: "Provide password",
    validationMessage: "Password is required!",
  }
  const passwordRequiredValidator = { name: "passwordRequiredValidator" }

  return (
    <Form formProps={formProps}>
      <RequiredValidator requiredValidatorProps={userNameRequiredValidator}>
        <TextBox textBoxProps={userNameProps} />
      </RequiredValidator>

      <RequiredValidator requiredValidatorProps={passwordRequiredValidator}>
        <Password passwordProps={passwordProps} />
      </RequiredValidator>

      <div className="button-container">
        <input type="submit" />
      </div>
    </Form>
  )
}

render(<App />, document.getElementById("app"))