React Form Component Library

Overview

The React Form Component Library provides a set of reusable and customizable form components designed to simplify form handling in React applications. The library includes several input components, which are flexible and easy to integrate into any project.

import {DropDown} from "react-forms-ts";
import { FormProvider } from "react-forms-ts";
import {InputBox} from "react-forms-ts";
import {RadioButton} from "react-forms-ts";
import "react-forms-ts/dist/styles.css"

const App = () => {
  const emailValidity = (data:string)=>{
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(data);
  }
  const feedbackValidity = (data:string)=> data.length <= 10;
  const passowordValidity = (data:String) => data.length > 4;
  const dateValidity = (data:string)=>{
    const regex = /^(\d{4})-(\d{2})-(\d{2})$/;
    console.log(data.match(regex))
    return data.match(regex) ? true : false;
  }
  return (
      <FormProvider submitFunc={(data:string)=>{alert(data)}}>
        <InputBox fieldKey='email' required={true} placeholder='Enter email' value={""} validateFunc={emailValidity} defaultErrorText='enter valid email' type='email' minLength={5}/>
        <InputBox fieldKey='password' required={true} placeholder='enter passoword' value={""} validateFunc={passowordValidity} defaultErrorText='password must have atleast 5 characters' type='password'/>
        <InputBox fieldKey='dob' required={true} placeholder='enter date' value={""} validateFunc={dateValidity} defaultErrorText='enter valid date' type='date'/>
        <DropDown 
          fieldKey='country' 
          required={true} 
          options={["India", "USA", "Canada"]} 
          value={""} 
          width="200px" 
          height="40px" 
          color="black" 
          bgColor="transparent" 
          font="Arial" 
        />
        <RadioButton fieldKey='gender' required={true} options={["Male","Female"]} value={""}/>
        <InputBox fieldKey='feedback' required={true} placeholder='Enter work expeirence' value={""} validateFunc={feedbackValidity} defaultErrorText='Write within 10 letters' type='textarea' cols={26}/>
        <InputBox fieldKey='rating' required={true} placeholder='Welcome to newsletter' value={"Subscibe to Newsletter"} validateFunc={feedbackValidity} defaultErrorText='' type='checkbox'/>
        <InputBox fieldKey='submit' required={true} placeholder='something' value={"Click me"} validateFunc={()=>{return true;}} defaultErrorText='enter valid dob' type='submit' bgColor="#A020F0" height="3rem" color="white"/>
      </FormProvider>
  );
};

export default App;

Sample deployment link - https://react-forms-ts-deployment.onrender.com/

Features

• Supports multiple input types including text, email, password, file uploads, date, telephone, and buttons.
• Customizable styles through props and class names.
• Integration of custom validation logic.
• Easy to use with hooks for managing form state.
• Micro-animations, animated error UI
• Integrated Debouncer with custom debounce delay

Table of Contents

• Installation
• Usage
  • FormProvider
  • InputBox
  • RadioButton
  • DropDownButton
  • Button
• Props
  • InputBox Props
  • RadioButton Props
• Customizations
• Version Chronicle

Installation

You can install the package via npm or yarn:

npm install react-forms-ts

or

yarn add react-forms-ts

Usage

Import styling

To use the react-forms-ts package, make sure to import the styles in your project. Add the following line in your main application file or wherever you use the components:

import 'react-forms-ts/dist/styles.css';

FormProvider

The FormProvider component wraps your form and manages the form state and validation logic across all child components. It ensures that validation functions and form states are accessible and consistent throughout the form.

<FormProvider>
  <InputBox/>
</FormProvider>

InputBox

The InputBox component is a versatile input field that supports various types:

• text
• email
• password
• textarea
• date
• file
• tel
• button

Example

import {InputBox} from 'react-forms-ts';
import { FormProvider } from 'react-forms-ts';

const App = () => {
  const emailValidity = (data:string)=>{
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(data);
  }
  return (
      <FormProvider>
        <InputBox fieldKey='email' required={true} placeholder='Enter email' value={""} validateFunc={emailValidity} defaultErrorText='enter valid email' type='email'/>
      </FormProvider>
  );
};

RadioButton

The RadioButton component allows users to select one option from a list of choices.

Example

import {InputBox} from 'react-forms-ts';
import {RadioButton} from 'react-forms-ts';
import { FormProvider } from 'react-forms-ts';

const App = () => {
  return (
      <FormProvider>
        <RadioButton fieldKey='country' required={true} options={["India","USA","Canada"]} value={""}/>
      </FormProvider>
  );
};


export default App

DropDown

The DropDown component allows users to select an option from a dropdown list.

Example

import {DropDown} from 'react-forms-ts';
import { FormProvider } from 'react-forms-ts';

const App = () => {
  return (
      <FormProvider>
        <DropDown 
          fieldKey='country' 
          required={true} 
          options={["India", "USA", "Canada"]} 
          value={""} 
          width="200px" 
          height="40px" 
          color="black" 
          bgColor="transparent" 
          font="Arial" 
        />
      </FormProvider>
  );
};

export default App;

Button

The Button component allows users to handle or induce on click events in the form

Example

import { FormProvider, InputBox} from "react-forms-ts";
import "react-forms-ts/dist/styles.css";

const App = () => {
  return (
      <FormProvider>
        <InputBox fieldKey='btn' required={true} placeholder='' value={"Click me"} validateFunc={()=>{}} defaultErrorText='' type='button' bgColor="#A020F0" height="3rem" color="white"/>
      </FormProvider>
  );
};

export default App;

Props

InputBox Props

| Prop | Type | Description | |-------------------|---------------------------|--------------------------------------------------------------------| | type | string | Type of input (e.g., text, email, password, textarea, file, tel, button, date). | | required | boolean | Indicates whether the input is required. | | placeholder | string | Placeholder text for the input (applicable for text types). | | width | string | Width of the input field. | | height | string | Height of the input field. | | color | string | Text color for the input. | | bgColor | string | Background color for the input. | | font | string | Font family for the input. | | defaultErrorText| string | Default error message to display when validation fails. | | className | string | Additional CSS classes for customization. | | value | string | Initial value of the input (applicable for text types). | | onClick | function | Function to call on button click (applicable for button type). |

RadioButton Props and DropDown Props

| Prop | Type | Description | |-------------------|---------------------------|--------------------------------------------------------------------| | options | string[] | Array of options for the radio buttons. | | fieldKey | string | Unique key for the radio button group. | | required | boolean | Indicates whether a selection is required. | | width | string | Width of the radio button container. | | height | string | Height of the radio button container. | | color | string | Text color for the radio button labels. | | bgColor | string | Background color for the radio button container. | | font | string | Font family for the radio button labels. | | className | string | Additional CSS classes for customization. |

Form Props

| Prop | Type | Description | |-------------------|---------------------------|--------------------------------------------------------------------| | debounceDelay | number | Adjusts the custom debounce delay | | | submitFunc | function | Fired on submission of the form | |

Customization

The react-forms-ts package is designed to be smart enough to accept native arguments that work on standard HTML input elements. This means you can pass additional props to customize your input fields according to your needs.

For example, you can add class names, htmls arguments, set placeholder text, define input types, and more to achieve greater flexibility in your UI. Here’s a quick example:

import {InputBox} from 'react-forms-ts';
import { FormProvider } from 'react-forms-ts';

const App = () => {
  const emailValidity = (data:string)=>{
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(data);
  }
  return (
      <FormProvider>
        <InputBox fieldKey='email' required={true} placeholder='Enter email' value={""} validateFunc={emailValidity} defaultErrorText='enter valid email' type='email' aria-label={"This is input field"}/>
      </FormProvider>
  );
};

Versions

• 1.2.4:

  • New feature Introducing micro-animations.

• 1.2.2:

  • Update Added a sample deployment link.

• 1.2.0:

  • New Feature Added major customizations for checkbox.
  • Improvement Default label support for checkbox.

• 1.1.3:

  • Improvement Removed unwanted validation controller from updation pipeline.

• 1.1.2:

  • Improvement Fixed dropdown error validation check.

• 1.1.1:

  • Improvement Fixed form submission control.

• 1.1.0:

  • Initial Release Version 1.1 with major UI and form validation improvements.