FormValidify Documentation

Table of Contents

1. Introduction
2. Installation
3. Usage
   • Components
   • FormValidify
   • InputComponent
   • SelectComponent
   • TextAreaComponent
   • ButtonComponent
4. Props
   • FormValidify Props
   • InputComponent Props
   • SelectComponent Props
   • TextAreaComponent Props
   • ButtonComponent Props
5. Examples
6. Contributing

Introduction

FormValidify is a customizable and reusable form validation library built with React and TypeScript. It provides components for creating forms with built in and user defined validations, error handling, and customizable styles. The package is designed to be easy to use and integrates smoothly into your React applications.

Installation

To install FormValidify, use npm or yarn:

npm install react-form-validify

or

yarn add react-form-validify

Usage

To use FormValidify in your project, import the components and styles you need:

import { FormValidify, InputComponent, SelectComponent, TextAreaComponent, ButtonComponent } from 'react-form-validify';

// to import styles
import "react-form-validify/dist/styles.css";

Components

FormValidify comes with the following components:

• FormValidify
• InputComponent
• SelectComponent
• TextAreaComponent
• ButtonComponent

FormValidify

The main component that wraps around your form elements to handle validation.

<FormValidify>
  {/* Form components go here */}
</FormValidify>

InputComponent

A customizable input field component.

<InputComponent
  name="username"
  label="Username"
  type="text"
  placeholder="Enter your username"
  minLength={6}
  maxLength={15}
  style={{
    backgroundColor:"gray";
    paddingTop:"10px";
    //custom stylings.
  }}
  validate={(value) => {
    if (value.length < 6) {
      return "Username must be at least 6 characters.";
    }
    if (!/^[a-zA-Z0-9]+$/.test(value)) {
      return "Username must contain only alphanumeric characters.";
    }
    return null; // No error
  }}
/>

SelectComponent

A dropdown select component for choosing from predefined options.

<SelectComponent
  name="gender"
  label="Gender"
  options={[
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' },
  ]}
  style={{
    backgroundColor:"gray";
    paddingTop:"10px";
    //custom stylings.
  }}
/>

TextAreaComponent

A customizable text area component.

<TextAreaComponent
  name="bio"
  label="Bio"
  placeholder="Tell us about yourself"
  rows={10}
  cols={20}
  style={{
    backgroundColor:"gray";
    paddingTop:"10px";
    //custom stylings.
  }}
  validate={(value) => {
    if (value.length < 6) {
      return "Username must be at least 6 characters.";
    }
    if (!/^[a-zA-Z0-9]+$/.test(value)) {
      return "Username must contain only alphanumeric characters.";
    }
    return null; // No error
  }}
/>

ButtonComponent

A customizable button component for submitting the form.

<ButtonComponent
  type="submit"
  label="Submit"
  style={{
    backgroundColor:"gray";
    paddingTop:"10px";
    //custom stylings.
  }}
/>

Props

FormValidify Props

| Prop | Type | Description | |-----------|--------------------------|------------------------------------------------------| | children | ReactNode | Child components (form elements). |

InputComponent Props

| Prop | Type | Description | |--------------|----------------|----------------------------------------------| | name | string | The name of the input field. | | label | string | Label text for the input field. | | type | string | Type of the input field (e.g., text, email).| | placeholder | string | Placeholder text for the input field. | | minLength | number | Minimum length for validation (optional). | | maxLength | number | Maximum length for validation (optional). | | style | React.CSSProperties | Custom styles defined by the user (optional). | |validate | (value: string) => string | null Custom validation function that returns an error message or null. |

SelectComponent Props

| Prop | Type | Description | |-----------|--------------------------------|------------------------------------------| | name | string | The name of the select field. | | label | string | Label text for the select field. | | options | Array<{ value: string; label: string }> | Array of options for the select field. | | style | React.CSSProperties | Custom styles defined by the user (optional). |

TextAreaComponent Props

| Prop | Type | Description | |-----------|--------------------------|-----------------------------------------------| | name | string | The name of the text area. | | label | string | Label text for the text area. | | placeholder | string | Placeholder text for the text area. | | style | React.CSSProperties | Custom styles defined by the user (optional). | |validate | (value: string) => string | null Custom validation function that returns an error message or null. |

ButtonComponent Props

| Prop | Type | Description | |-----------|--------------------------|-----------------------------------------------| | type | string | Type of the button (e.g., submit). | | label | string | Label text for the button. | | onSubmit | (values: Record<string, string>) => void | Function to handle button click (optional). | | style | React.CSSProperties | Custom styles defined by the user (optional). |

Examples

Basic Usage

import React from 'react';
import { FormValidify, InputComponent, SelectComponent, TextAreaComponent, ButtonComponent } from 'react-form-validify';
import "react-form-validify/dist/styles.css"

function App() {
  return (
    <FormValidify>
      <InputComponent
        name="username"
        label="Username"
        type="text"
        placeholder="Enter your username"
        minLength={6}
      />
      <InputComponent
        name="email"
        label="Email"
        type="email"
        validate={(value) => {
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailRegex.test(value)) {
            return "Please enter a valid email address.";
          }
          return null;
        }}
      />

      <SelectComponent
        name="gender"
        label="Gender"
        options={[
          { value: 'male', label: 'Male' },
          { value: 'female', label: 'Female' },
          { value: 'other', label: 'Other' },
        ]}
      />
      <TextAreaComponent
        name="bio"
        label="Bio"
        placeholder="Tell us about yourself"
      />
      <ButtonComponent type="submit" label="Submit" onSubmit={(values) => console.log(values)} />
    </FormValidify>
  );
}

Contributing

Contributions are welcome! Please submit a pull request or open an issue to discuss your changes.