use-state-validate

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

📖 Documentation 📖

Install

1# npm
2npm install use-state-validate
3# yarn
4yarn add use-state-validate
5# pnpm
6pnpm install use-state-validate

1  import useStateValidate from 'use-state-validate'; // ESM
2  // or
3  const useStateValidate = require('use-state-validate'); // CJS

Summary

This package is a custom hook that extends useState to provide validation. use-state-validate is strictly focused on the validation of field values and does not try to handle every facet of form logic. Great effort was spent to make the utility razor thin to help you keep your overall bundle size small.

Basic Use

1import useStateValidate, { ruleEmail } from "use-state-validate"
2
3export const SomeComponent = () => {
4  const field = useStateValidate("", {
5    label: "Email",
6    required: true,
7    cueDelay: 0,
8    rules: [[ruleEmail(), "Email must be in a valid format"]],
9  })
10
11  return (
12      <form>
13        <label htmlFor="email">Email</label>
14        <input
15          id="email"
16          aria-invalid={field.cueInvalid || undefined}
17          value={field.value}
18          onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.setValue(e.target.value)}
19        />
20        {field.cueInvalid && <div aria-live="polite">{field.errors[0]}</div>}
21      </form>
22  )
23}

See Documentation for full usage and API.

Package size @ Bundlephobia

Changelog

• v3.0.1 - Fixes ruleLength bug on min logic.
• v3.0.0 - Overhaul, leans heavy on cuing concepts for smooth UX. Lib made leaner and more flexible.
• v2.5.4 - Bugfix - required, message type
• v2.5.1 - Bugfix
• v2.4.0 - Adds name to IStateValidateRules and validation wrapper
• v2.3.0 - Exposes IStateValidateRules
• v2.2.0 - Adds types to rules object
• v2.1.0 - Adds types to validation wrapper
• v2.0.3 - React version bugfix
• v2.0.0 - Drops 3rd party dep and this project does its own validation
• v1.0.6 - No breaking changes, but departs from 3rd party dep
• v1.0.5 - Fixes bug where clean used after set does not honor set's mutation
• v1.0.1 - v1.0.4 - Readme updates - no code changes
• v1.0.0 - Hook has been stable in projects, bumping to initial release
• v0.0.x - Initial dev release - ASSUME UNSTABLE