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.