useValidation

useValidation is an easy-to-use custom React hook designed to simplify the process of form validation. This hook provides a straightforward way to validate form inputs, manage error messages, and ensure a smooth user experience in your React applications.

Installation

Install the package with npm:

npm install @beargreenholtz/react-usevalidation

Usage

import useValidation from 'usvalidation';

function MyComponent() {
  const [resetErrors, errors, handleValidation] = useValidation();

  // Use these functions in your form
}

useValidation returns an array with three elements:

• resetErrors

  • Type: Function
  • Description: This function allows you to reset all current form errors. It's useful for clearing errors when the user starts editing the form again.

• errors

  • Type: Object
  • Description: An object containing all current form errors. Each key in this object corresponds to a form input name, and its value is the error message for that input.

• handleValidation

  • Type: Function
  • Description: A function to validate form inputs. It takes an input name and a validation rule as arguments and updates the errors object based on the validation result.

Example

Basic Example Here's a simple example demonstrating how to use useValidation to validate a text input: javascript

import React from 'react';
import useValidation from '@beargreenholtz/react-usevalidation';

function MyForm() {
  const [resetErrors, errors, handleValidation] = useValidation();

  const [inputs, setInputs] = useState();

  const onChangeInput = () =>{
      resetErrors()

      //Rest change logic
  }

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

	    if (!handleValidation(inputs)) {
			return;
		}

        // Rest of your submit logic

  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="example"
        placeholder="Example"
        onChange={onChangeInput}
      />
      {errors.example && <p>{errors.example}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

Limits

For now you can only validate common inputs such as:

• username
• email
• password

Contact me for more suggestion.