react-tailwind-form-validator

React Tailwind Form Validator

A lightweight, flexible, and customizable form validation library built with React and styled using Tailwind CSS. It streamlines the process of creating forms with validation, offering reusable components and simple validation rules for easy integration into your React projects.

Installation

To install the library, run the following command:

npm install react-tailwind-form-validator
# or
yarn add react-tailwind-form-validator

Prerequisite

Tailwind CSS must be installed in your project before using this library. If you haven’t installed Tailwind CSS yet, follow the installation guide to set it up.

Live Demo

Check out the live working demo at: React Tailwind Form Validator Demo

Getting Started

Follow these steps to begin using the form validation components in your React application.

1. Wrapping Your Application with FormProvider

First, you need to wrap your application with the FormProvider to manage form state and validation across all form elements.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { FormProvider } from 'react-tailwind-form-validator';

import App from './App.tsx';
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <FormProvider>
      <App />
    </FormProvider>
  </StrictMode>
);

2. Using Form Components

The library provides several customizable components for building your form. Here are the available components:

Each component can be styled using Tailwind CSS classes.

Example: Basic Form Usage

Create a new file src/components/MyForm.tsx:

import React from 'react';
import {
  Button,
  Input,
  RadioButton,
  Select,
  useFormData,
} from 'react-tailwind-form-validator';

interface SubmittedData {
  email: string;
  password: string;
  username: string;
  gender: string;
  securityLevel: string;
}

export const MyForm: React.FC = () => {
  const { formData, revalidate, areInputsValid } = useFormData();

  const data: SubmittedData = {
    email: formData.email,
    password: formData.password,
    username: formData.username,
    gender: formData.gender,
    securityLevel: formData.securityLevel,
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    revalidate();

    if (areInputsValid()) {
      console.log('Form submitted:', data);
      alert(`Form submitted successfully!, Data is \n${JSON.stringify(data)}`);
    } else {
      alert('Please fill at least one field.');
    }
  };

  return (
    <form className="space-y-3 w-full flex flex-col items-center">
      <Input
        fieldKey="email"
        styleVariant="outline"
        type="email"
        className="text-lg"
      />

      <Input
        fieldKey="password"
        type="password"
        styleVariant="outline"
        className="text-lg"
      />

      <Input
        type="text"
        className=""
        fieldKey="username"
        placeholder="Username"
        customValidation={(value: string) =>
          value.length < 4 ? 'Username must be at least 4 characters' : null
        }
      />

      <RadioButton
        fieldKey="gender"
        containerClassName="flex justify-center items-center gap-4"
        labelClassName="space-x-2"
        options={[
          { value: 'male', label: 'Male' },
          { value: 'female', label: 'Female' },
          {
            value: "Don't Blame me for not including the rest...😉",
            label: 'Others',
          },
        ]}
        required
      />

      <Select
        fieldKey="security"
        className=""
        options={[
          { value: 'max', label: 'Password Security to max' },
          { value: 'low', label: 'Password Security to low' },
        ]}
        placeholder="Select Security Level"
        styleVariant="outline"
      />

      <Button
        variant="outline"
        onClick={handleSubmit}
        className="text-lg py-3 px-6 font-semibold"
      >
        Submit
      </Button>
    </form>
  );
};

3. Update App.tsx

import { MyForm } from './components/MyForm';

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <MyForm />
    </div>
  );
}

export default App;

4. Run Your Application

npm run dev

5. Validation Rules

Each form component supports several built-in validation rules, such as required and customValidation, that can be applied to the form fields. You can also define custom validation logic (e.g., regex or length checks).

Example: Custom Validation for Input Component

<Input
  type="text"
  fieldKey="username"
  placeholder="Username"
  customValidation={(value) => {
    const regex = /^[a-zA-Z0-9_]+$/; // Only allows letters, numbers, and underscores
    if (!regex.test(value)) {
      return 'Username can only contain letters, numbers, and underscores';
    }
    if (value.length < 4) {
      return 'Username must be at least 4 characters';
    }
    return null; // Validation passed
  }}
/>

6. Full Form Example

For a complete example, please refer to the example folder in this project or visit GitHub Repo.

Props

Here’s a breakdown of the props available for each component:

Button

Props for the Button component:

Input

Props for the Input component:

RadioButton

Props for the RadioButton component:

Select

Props for the Select component:

Features

Conclusion

React Tailwind Form Validator is designed to make form creation and validation simple and customizable. It integrates seamlessly with Tailwind CSS for flexible styling, supports built-in and custom validation rules, and is easy to use in any React project.