React Form Sanitization

React Form Sanitization is a lightweight TypeScript utility package designed to help developers efficiently manage and sanitize form data after submission. This package offers two key functions—sanitizeFormData and sanitizeFormValue—which remove unwanted values from form data, such as undefined, null, empty strings, and other falsy values. It is especially useful for applications that require a clean, validated data structure for processing, storage, or API calls.

📦 Installation

Install the package via npm or Yarn:

With npm:

npm i react-form-sanitization

With Yarn:

yarn add react-form-sanitization

✨ Key Features

• Data Sanitization: Removes undefined, null, empty strings, and other falsy values from form data to ensure a clean output.
• Flexible Filtering: Provides ignoreKeys and requiredKeys parameters for custom control over sanitization, allowing certain fields to be excluded or marked as required.
• TypeScript Support: Built with TypeScript, ensuring type safety and seamless integration with TypeScript-based projects.
• Minimal Impact: Small bundle size with minimal performance overhead, making it suitable for production environments.

⌨️ Functions

1.sanitizeFormData

This function removes unwanted values from the entire form data object. It accepts two parameters:

• ignoreKeys (Optional): Array of field names that should not be sanitized or removed.
• requiredKeys (Optional): Array of field names that are required and should not be removed, even if their values are falsy (undefined, null, or "").

Example:

import { sanitizeFormData } from "react-form-sanitization"

import { sanitizeFormData } from "react-form-sanitization";

const formData = {
  name: "John Doe", // Should be removed because it's in ignoreKeys
  age: 0, // Should be retained because it's in requiredKeys
  email: "", // Should be removed because it's empty
  address: null, // Should be removed because it's null
  phone: undefined, // Should be removed because it's undefined
  image: "", // Should be removed because it's empty
};

const [createUser, { isLoading }] = useCreateUserMutation();

const onSubmit = (formData) => {
  const cleanedData = sanitizeFormData(formData, {
    ignoreKeys: ["name"], // Keeps `name` if it has a value (ignored in output here)
    requiredKeys: ["age"], // Keeps `age` as it’s required, even if falsy (0)
  });

  createUser(cleanedData);

  // Expected Result:
  // {
  //   age: 0
  // }
};

Explanation:

• ignoreKeys: ["name"]: This ensures that even if name exists, it will be removed if it has a falsy
• requiredKeys: ["age"]: age will always be kept, even though 0 is a falsy value.

2.sanitizeFormValue

This function sanitizes individual form values with customizable settings for excluding or requiring fields. It works similarly to sanitizeFormData but is tailored for use with individual values.

• ignoreKeys (Optional): Array of field names that should not be sanitized or removed.
• requiredKeys (Optional): Array of field names that are required and should not be removed, even if their values are falsy (undefined, null, or "").

Example:

import { sanitizeFormValue } from "react-form-sanitization"

import { sanitizeFormValue } from "react-form-sanitization";

const formValue = {
  description: "", // Empty string should be removed
  tags: [], // Empty array should be removed
  priority: undefined, // Should be retained because it's in requiredKeys
  deadline: "2024-11-01", // Should be retained as `ignoreKeys` prevents its removal
};

const [todo, { isLoading }] = useTodoMutation();

const onSubmit = (formValue) => {
  const cleanedValue = sanitizeFormValue(formValue, {
    ignoreKeys: ["deadline"], // Keep `deadline` even if it's undefined
    requiredKeys: ["priority"], // Ensure `priority` is included, even if it's undefined
  });

  todo(cleanedValue);

  // Expected Result:
  // { priority: undefined, deadline: "2024-11-01" }
};

Explanation:

• ignoreKeys: ["deadline"]: Ensures ``deadline` is retained regardless of its value.
• requiredKeys: ["priority"]: Ensures priority is kept even if undefined.

🔨 Usage

You can use either sanitizeFormData or sanitizeFormValue in your form handling logic depending on whether you're sanitizing a whole object of data or just an individual value. Here's how to implement it:

• import sanitizeFormData or sanitizeFormValue in your form handling logic.
• Use these functions to clean up form submissions before processing, API calls, or storing data.

📚 API Documentation

sanitizeFormData(formData, options)

• Parameters:

  • formData: An object representing the form data.
  • options: An optional object containing:
    • ignoreKeys: Array of keys to ignore sanitization.
    • requiredKeys: Array of keys that are required, even if they have falsy values.
  • Returns: A new object with sanitized values.

  sanitizeFormValue(formValue, options)

• Parameters:

  • formValue: A single form value.
  • options: Same as sanitizeFormData.

• Returns: A sanitized value, which may be null, undefined, or an empty value based on the given conditions.

Summary:

React Form Sanitization provides a simple, effective solution for managing form data cleanliness in TypeScript projects. By offering robust data sanitization and flexible filtering options, this package ensures form submissions are optimized for further processing, storage, or API calls. With its small footprint and TypeScript support, it's an essential tool for maintaining high-quality, validated form data in modern React applications.