README

use-state-validate

Repo: https://gitlab.com/tkil/use-state-validate

Install

npm install use-state-validate --save

  import useStateValidate from 'use-state-validate';
  // or
  const useStateValidate = require('use-state-validate');

Summary

This package contains a custom hook that blends useState and field validation. useStateValidate is focused on the validation of single state values in your form and does not try to handle all of the form logic. My motivation was to create a clean and terse pattern for dealing with state validation in react. There are MANY libraries and packages out there, but none have resonated with me just yet. So here we are... Enjoy and I hope this helps you in your next project. Please reach out to me or throw an issue on my gitlab if you have any troubles 😀

Code

import useStateValidate from "use-state-validate";

const [nameV, setName, cleanName] = useStateValidate("Tim", {
  required: true
  message: {
    required: "A name is required"
  }
});
console.log(nameV.value); // Tim
console.log(nameV.isValid); // false

Hook Signature

const [<valWrap>, <setVal>, <cleanVal>] = useStateValidate(<initVal>, <rules>)


`valWrap`	An object containing the raw value and validation data, use `<valWrap>`.`value` to get the value
`setVal`	Set function, that behaves like `useState`. PLEASE PASS THE RAW VALUE HERE, not a wrapper like object!
`cleanVal`	Function to clean the dirty flag. The dirty flag defaults to false, but is set to true if `setVal` is invoked
`initVal`	The initial value to start with
`rules`	A mostly flat object using rules found at https://www.npmjs.com/package/validate

Rule Examples

{
  "required": true,
  "size": { "min": 8, "max": 255 },
  "message": {
    "required": "Your field is required please",
    "size": "Use between 8 and 255 characters please"
  }
}

{
  "match": /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/,
  "message": {
    "match": "Pass my crazy regex!"
  }
}

Illustration of `valueWrapped`, showing the validation wrapper object

{
  "value": "value of field",
  "name": "label given to wrapper",
  "isDirty": false,
  "isRequired": true,
  "isValid": false,
  "type": "string",
  "errorMessages": [
    "Error Message 1",
    "Error Message 2"
  ]
}

Basic Usage

import React from "react";
import useStateValidate from "use-state-validate";

const Component: React.FC = () => {
  const [nameV, setName, cleanName] = useStateValidate("Ray Finkle", {
    required: true
    match: /[a-zA-Z ]/
    message: {
      required: "You must enter a name!",
      match: "Please use only letters",
    }
  });
  return (
    <section>
      <label> Name:
        <span>{nameV.value}</span>
      </label>
      <hr />
      <input value={nameV.value} onChange={(evt) => setName(evt.target.value)}/>
      <button onClick={cleanName}>Clean it</button>
      <hr />
      <div> ⬇️ Show Me the Data! ⬇️ </div>
      <pre>{JSON.stringify(nameV, null, 2)}</pre>
    </section>
  );
};

Rules

Required

Validation requires a value, undefined, null, and "" will cause validation to fail.

{
  required: true
  message: {
    required: "You must enter a name!",
  }
}

Type

Validation requires values to match the provided type.

{
  type: "string"
  message: {
    type: "You must enter a string value!",
  }
}

Length

Validation requires values to match the provided type.

{
  length: { min: 3, max: 10 }
  message: {
    length: "You must enter a value between 3 and 10 characters long!",
  }
}

Enum

Validation requires value to match a provided enum.

{
  enum: ["apple", "banana", "orange"]
  message: {
    enum: "Your value must be an apple, banana or orange !",
  }
}

Match

Validation requires values to match the provided regex.

{
  match: /[A-Za-z0-9]/
  message: {
    match: "You must enter an alphanumeric value!",
  }
}

Function / Fn