Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

use-valid-state

xsubject19MIT1.0.4TypeScript support: included

Custom React hook that provides a simple way to validate state in React application

react, useState, state, state validation, validation, valid, use-state, use-state-valid, use-valid, use-valid-state, state-valid, hook

readme

use-valid-state

License npm version

Custom React hook that provides a simple way to validate state in React application

Features

  • Easily manage state with validation in React.
  • Supports various types of validators for different data types (strings, numbers).
  • Provides a flexible and reusable solution for validation states.
  • Fully compatible with default useState

Installation

Install the package using npm:

npm install use-valid-state

Usage

Here's an example of how to use the useValidState hook:

const [email, setEmail] = useValidState(''); // identical `useState`

Add the second argument to the validator function that matches (input: T) => boolean

const [email, setEmail, isValidEmail] = useValidState('', (text: string) => text.length > 5); 
// now, isValidEmail displays whether the given state matches the passed function

You can use the hook with any type, but if you're using a string, you can just pass in a regular expression

const [email, setEmail, isValidEmail] = useValidState('', /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/);

I have also prepared some common validation needs for strings and numbers which you can find in NumberValidator and StringValidator

import { useValidState, NumberValidator } from "use-valid-state"
// ...
const [age, setAge, isValidAge] = useValidState(18, NumberValidator.min(18));

You can also pass more than one validator

const [age, setAge, isValidAge] = useValidState(6, NumberValidator.min(6), NumberValidator.max(17));

StringValidator

Function Description
email() Checks if the input is a valid email address.
url() Checks if the input is a valid URL.
phoneNumber() Checks if the input is a valid phone number.
integer() Checks if the input is a valid integer.
decimal() Checks if the input is a valid decimal number.
date() Checks if the input is a valid date in the format "YYYY-MM-DD".
time() Checks if the input is a valid time in the format "HH:MM".
username() Checks if the input is a valid username consisting of alphanumeric characters and underscores.
password() Checks if the input is a valid password with specific criteria.
zipCode() Checks if the input is a valid US ZIP code.
ipAddress() Checks if the input is a valid IP address.
hexColor() Checks if the input is a valid hexadecimal color code.
filename() Checks if the input is a valid filename with an extension.
guid() Checks if the input is a valid GUID (Globally Unique Identifier).
usZipCode() Checks if the input is a valid US ZIP code.
domainName() Checks if the input is a valid domain name.
creditCard() Checks if the input is a valid credit card number.
vin() Checks if the input is a valid VIN (Vehicle Identification Number).
ssn() Checks if the input is a valid US Social Security Number.
phoneNumberAnyCountry() Checks if the input is a valid phone number for any country.
emoji() Checks if the input contains any emoji characters.
htmlTag() Checks if the input is a valid HTML tag.
macAddress() Checks if the input is a valid MAC address.
passportNumber() Checks if the input is a valid passport number.
currency() Checks if the input is a valid currency amount.

NumberValidator

Function Description
min(min: number) Checks if the number is less than or equal to the min argument.
max(max: number) Checks if the number is greater than or equal to the max argument.
positive() Checks if the number is greater than or equal to zero.
negative() Checks if the number is less than or equal to -1.
integer() Checks if the number is an integer.
decimal() Checks if the number is a decimal number (not an integer).
even() Checks if the number is an even number.
odd() Checks if the number is an odd number.
prime() Checks if the number is a prime number.
divisibleBy(divisor) Checks if the number is divisible by the divisor argument.
multipleOf(multiple) Checks if the number is a multiple of the multiple argument.
between(min, max) Checks if the number is between the min and max arguments.
nan() Checks if the number is NaN (Not-a-Number).
finite() Checks if the number is a finite number.
positiveInfinity() Checks if the number is positive infinity.
negativeInfinity() Checks if the number is negative infinity.
wholeNumber() Checks if the number is a whole number (an integer without a fraction).
nonNegative() Checks if the number is greater than or equal to zero.
nonPositive() Checks if the number is less than or equal to zero.
notZero() Checks if the number is not equal to zero.
notNaN() Checks if the number is not NaN (Not-a-Number).

LICENSE

This project is licensed under the MIT License. See the LICENSE file for details.