use validations

use validations provides a custom hook to do validations in React in a simple and lightweight way, without changing your components or the global state of your application.

Pretty simple validator example,

import useValidations, { isRequired } from "use-validations";

function App()  {
  const { handleInputChange, data, errors } = useValidations<{ name: string }>({
    defaultData: { name: "" },
    validators: { name: isRequired }
  });

  return (
    <div>
      <label htmlFor="user-name">Username</label>

      <input
        id="user-name"
        type="text"
        onChange={handleInputChange("name")}
        value={data.name}
      />

      {errors.name && <small>{errors.name}</small>}
    </div>
  );
}

export default App;

the validator function receives a string with the value to validate and stores in the errors object, null if the value to validate is valid or a string with the description of the validation error.

Example of a custom validator with more than one validation:

import useValidations from "use-validations";
import differenceInCalendarDays from "date-fns/differenceInCalendarDays";

const customValidator = (date: string) => {
  // get the difference in days between the selected date and today.
  const diffDays = differenceInCalendarDays(new Date(date), new Date());

  // if the difference is less than or equal to -1, it is today or before today.
  if (diffDays <= -1) {
    return "the date should be higher than today.";
  }

  // if the difference is greater than or equal to 3, it is 3 days or more in the future.
  if (diffDays >= 3) {
    return "the date should not be more than 3 days after the current date.";
  }

  return null;
};

function App()  {
  const { handleInputChange, data, errors } = useValidations<{
    scheduleDate: string;
  }>({
    defaultData: { scheduleDate: "" },
    validators: { scheduleDate: customValidator },
  });

  return (
    <div>
      <label htmlFor="schedule-date">Schedule Date</label>

      <input
        id="schedule-date"
        type="date"
        onChange={handleInputChange("scheduleDate")}
        value={data.scheduleDate}
      />

      {errors.scheduleDate && <small>{errors.scheduleDate}</small>}
    </div>
  );
}

export default App;

Parameters.

| Key | Value | | ------------------|---------------------------------------------------------------------| | defaultData | Object with the field name as key and value as value :). | | validators | Object with the field name as key and validator function as value. |

Return values.

| Key | Value | | ------------------|-------------------------------------------------------------------------------------------------------------------- | | data | Object with the field name as key and a validating function as value. | | errors | Object with the field name as key and string error or null as value. | | emptyForm | Boolean value that does what it promises. | | handleInputChange | Function to handle data changes. | | hasErrors | Boolean value that does what it promises. | | doValidate | Function that runs all validations, and returns a boolean true if no validation gives an error and false otherwise. | | resetData | Function to reset the data to default values. |