useValidatedState

State with built-in validation.

Import

import { useValidatedState } from '@tidbcloud/uikit'

Usage

useValidatedState validates state with a given rule each time state is set. It returns an object with the current validation state, last valid value, and current value.

import { useValidatedState } from '@tidbcloud/uikit'
import { TextInput, Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [{ value, lastValidValue, valid }, setValue] = useValidatedState('', (val) => /^\S+@\S+$/.test(val))
 
  return (
    <>
      <TextInput
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
        placeholder="Enter email"
        error={!valid && value.length > 0 ? 'Invalid email' : null}
      />
      <Text mt="md">Current value: {value}</Text>
      <Text>Last valid value: {lastValidValue}</Text>
      <Text>Valid: {valid ? 'Yes' : 'No'}</Text>
    </>
  )
}

Example

import { useValidatedState } from '@tidbcloud/uikit'
 
const [{ lastValidValue, value, valid }, setValue] = useValidatedState('valid', (state) => state === 'valid')
 
// Initial state:
// lastValidValue -> 'valid'
// value -> 'valid'
// valid -> true
 
setValue('invalid')
 
// After setting invalid value:
// lastValidValue -> 'valid'
// value -> 'invalid'
// valid -> false

Definition

interface UseValidatedStateValue<T> {
  value: T
  lastValidValue: T | undefined
  valid: boolean
}
 
type UseValidatedStateReturnValue<T> = [UseValidatedStateValue<T>, (value: T) => void]
 
function useValidatedState<T>(
  initialValue: T,
  validate: (value: T) => boolean,
  initialValidationState?: boolean
): UseValidatedStateReturnValue<T>

useUncontrolled useClipboard