react-nitro-form

react-nitro-form is a lightweight React library for managing forms with built-in validation support. It simplifies form handling in React by providing a declarative way to manage state, validation, and submission.

Features

• Declarative Form Management: Easily manage form state with the useForm hook .
• Customizable Validation: Includes common validators (e.g., required, minLength, maxLength, email) and allows custom validation rules.
• Error Handling: Passes validation errors to form fields for display.
• Reset Functionality: Provides reset handling for form values.
• Easy Integration: Works seamlessly with any React application.

Installation

You can install react-nitro-form using npm or yarn:

npm install react-nitro-form

or

yarn add react-nitro-form

Usage

Basic Example

Here's a basic example of how to use react-nitro-form in your React application:

import React from 'react';
import { useForm, required, minLength } from 'react-nitro-form';

const App = () => {
  const initialValues = { username: '', password: '' };

  const validate = {
    username: required, // Ensures username is not empty
    password: minLength(6), // Ensures password is at least 6 characters long
  };

  const { values, handleChange, handleSubmit, handleReset } = useForm(
    initialValues,
    (values) => alert('Form Submitted: ' + JSON.stringify(values)),
    () => alert('Form Reset')
  );

  return (
    <form onSubmit={handleSubmit} onReset={handleReset}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {validate.username(values.username) && (
          <p>{validate.username(values.username)}</p>
        )}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {validate.password(values.password) && (
          <p>{validate.password(values.password)}</p>
        )}
      </div>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  );
};

export default App;

Advanced Example

Validation with Multiple Rules (note: use tailwind css to get the styles)

import React, { useState } from 'react';
import { useForm, required, minLength, isEmail } from 'react-nitro-form';

const App = () => {
  // Initial values for the form
  const initialValues = { name: '', email: '', password: '' };
  const [submittedData, setSubmittedData] = useState(null);

  // Enhanced validation rules
  const validate = {
    name: required, // Ensures the name is not empty
    email: (value) => required(value) || isEmail(value), // Checks for both required and valid email
    password: (value) => required(value) || minLength(6)(value), // Ensures password is required and has minimum length
  };

  // Form submission handler
  const handleFormSubmit = (values) => {
    setSubmittedData(values); // Store the submitted data
  };

  // Initialize form hooks
  const { values, handleChange, handleSubmit, handleReset } = useForm(
    initialValues,
    handleFormSubmit
  );

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 p-6">
      <div className="w-full max-w-md bg-white shadow-md rounded-lg p-8">
        <h1 className="text-2xl font-bold text-center mb-6 text-gray-700">React Nitro Form Demo</h1>
        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Name Field */}
          <div className="space-y-1">
            <label className="block text-gray-700 font-semibold">Name</label>
            <input
              type="text"
              name="name"
              value={values.name}
              onChange={handleChange}
              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter your name"
            />
            {validate.name(values.name) && (
              <p className="text-red-500 text-sm">{validate.name(values.name)}</p>
            )}
          </div>

          {/* Email Field */}
          <div className="space-y-1">
            <label className="block text-gray-700 font-semibold">Email</label>
            <input
              type="email"
              name="email"
              value={values.email}
              onChange={handleChange}
              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter your email"
            />
            {validate.email(values.email) && (
              <p className="text-red-500 text-sm">{validate.email(values.email)}</p>
            )}
          </div>

          {/* Password Field */}
          <div className="space-y-1">
            <label className="block text-gray-700 font-semibold">Password</label>
            <input
              type="password"
              name="password"
              value={values.password}
              onChange={handleChange}
              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="Enter your password"
            />
            {validate.password(values.password) && (
              <p className="text-red-500 text-sm">{validate.password(values.password)}</p>
            )}
          </div>

          {/* Buttons */}
          <div className="flex justify-between">
            <button
              type="submit"
              className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-200"
            >
              Submit
            </button>
            <button
              type="button"
              onClick={handleReset}
              className="bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-600 transition duration-200"
            >
              Reset
            </button>
          </div>
        </form>

        {/* Display Submitted Data */}
        {submittedData && (
          <div className="mt-6 p-4 bg-gray-50 rounded-lg shadow-inner">
            <h2 className="text-lg font-semibold text-gray-600">Form Submission Result</h2>
            <pre className="mt-2 p-2 bg-gray-100 rounded-lg text-gray-800 overflow-x-auto">
              {JSON.stringify(submittedData, null, 2)}
            </pre>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

Validators

react-nitro-form includes a set of built-in validators to handle common validation requirements. These validators are designed to be simple yet powerful, enabling you to ensure that form fields meet specific requirements.

How Validators Work

Validators are functions that check the value of a field and return an error message if the validation fails. When no error occurs, the validator returns undefined. Each validator can be assigned to a form field in the validate object, which maps field names to their corresponding validation functions.

Validators also support customizable field names. If a fieldName is not provided, the default value is used.

Built-in Validators

Here’s a list of the built-in validators and their usage:

required

Ensures the field is not empty.

• Arguments:
  • value: The value of the field.
  • fieldName (optional): The name of the field (default: "This field").

import { required } from 'react-nitro-form';

const validate = {
  username: required,
};

If username is empty, an error message like "Username is required" will be displayed.

minLength

Ensures the value has at least the specified number of characters.

• Arguments:
  • min: The minimum length.
  • value: The value of the field.
  • fieldName (optional): The name of the field (default: "This field").

import { minLength } from 'react-nitro-form';

const validate = {
  password: minLength(8),
};

If password is shorter than 8 characters, an error message like "Password must be at least 8 characters long" will be displayed.

maxLength

Ensures the value does not exceed the specified number of characters.

• Arguments:
  • max: The maximum length.
  • value: The value of the field.
  • fieldName (optional): The name of the field (default: "This field").

import { maxLength } from 'react-nitro-form';

const validate = {
  username: maxLength(15),
};

If username exceeds 15 characters, an error message like "Username must not exceed 15 characters" will be displayed.

isEmail

Ensures the value is a valid email address.

• Arguments:
  • value: The value of the field.
  • fieldName (optional): The name of the field (default: "Email").

import { isEmail } from 'react-nitro-form';

const validate = {
  email: isEmail,
};

If email is not a valid email address, an error message like "Email must be a valid email address" will be displayed.

match

Ensures the value matches another field's value.

• Arguments:
  • matchField: The name of the field to match.
  • value: The value of the field.
  • values: The full set of form values.
  • fieldName (optional): The name of the field (default: "This field").

import { match } from 'react-nitro-form';

const validate = {
  confirmPassword: match('password'),
};

If confirmPassword does not match password, an error message like "ConfirmPassword must match password" will be displayed.

customValidator

Enables custom validation logic.

• Arguments:
  • callback: A function that returns true if the value is valid or false otherwise.
  • errorMessage: The custom error message to display.
  • value: The value of the field.
  • fieldName: The name of the field.

import { customValidator } from 'react-nitro-form';

const isEven = (num) => num % 2 === 0;

const validate = {
  number: customValidator(isEven, 'The number must be even'),
};

If number is not even, an error message like "The number must be even" will be displayed.

Development

To build the project, you can use the following command:

npm run build

This will use Rollup to bundle the project.

Contributing

If you'd like to contribute to react-nitro-form, please fork the repository and use a feature branch. Pull requests are warmly welcome.

License

react-nitro-form is released under the MIT license. See LICENSE for more information.

Author

Hasan Hafizur Rahman