Use-valid-state NPM

use-valid-state

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.

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

@everything-registry/sub-chunk-3028

12 months ago

12 months ago

12 months ago

12 months ago