Types API Reference
Core Types
FieldValue
Base type for any field value.
FieldValues
Base type for form data structure.
type FieldValues = Record<string, FieldValue>;
AnyRecord
Utility type for objects with string keys and unknown values.
type AnyRecord = Record<string, unknown>;
PartialRecord
Utility type for partial records.
type PartialRecord<K extends keyof any, T> = {
[P in K]?: T;
};
Prettify
Utility type to improve TypeScript IDE display of complex types.
type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
Validation Types
VALIDATION_OUTCOME
Enum representing the validation state of a field or form.
enum VALIDATION_OUTCOME {
VALID = 'VALID',
INVALID = 'INVALID',
UNDETERMINED = 'UNDETERMINED'
}
- VALID: Validation passed
- INVALID: Validation failed
- UNDETERMINED: Validation hasn't been performed or is pending
ValidationStatus
Object containing validation information for a field.
interface ValidationStatus {
status: VALIDATION_OUTCOME;
message: string | undefined;
}
status
: Current validation outcome
message
: Error message when status is INVALID, undefined otherwise
Validator
Function type for validation rules.
type Validator = (value: FieldValue) => boolean | Promise<boolean>;
Returns true
if valid, false
if invalid. Can be synchronous or asynchronous.
Form Types
UseFormOptions
Options for configuring a form instance.
interface UseFormOptions<T extends FieldValues> {
defaultValues?: Partial<T>;
onUpdateAfterBlur?: (values: Partial<T>, data?: AnyRecord) => void;
}
defaultValues
: Initial field values
onUpdateAfterBlur
: Callback triggered after field blur when field is valid
FormContextApi
API interface for form instances.
interface FormContextApi<T extends FieldValues> {
// Value management
getFormValues(): Partial<T>;
setFormValues(newValues: Partial<T>): void;
resetForm(): void;
// Form submission
handleSubmit(callback: (values: Partial<T>) => void): () => void;
// Internal methods (used by components)
// ... (implementation details)
}
FormValues
Type representing form values with optional fields.
type FormValues<T extends FieldValues, Keys extends keyof T> = {
[K in Keys]: T[K] | undefined;
};
FormValidations
Type representing validation statuses for form fields.
type FormValidations<T extends FieldValues, Keys extends keyof T> = {
[K in Keys]: ValidationStatus | undefined;
};
Watch Types
WATCH_MODE
Enum for different value watching modes.
enum WATCH_MODE {
ON_CHANGE = 'ON_CHANGE',
ON_BLUR = 'ON_BLUR'
}
- ON_CHANGE: Values update on every change
- ON_BLUR: Values update only when field loses focus
Wizard Types
StepValidator
Function type for step-level validation in wizards.
type StepValidator<WizardValues extends Record<string, FieldValues>, Step extends keyof WizardValues> = (
stepValues: WizardValues[Step] | undefined
) => boolean | Promise<boolean>;
Returns true
to allow progression to next step, false
to block.
Steps
Type for configuring wizard steps.
type Steps<WizardValues extends Record<string, FieldValues>> = {
[K in keyof WizardValues]: {
name: K;
onNext?: StepValidator<WizardValues, K>;
};
}[keyof WizardValues][];
Array of step configurations with optional validation.
WizardContextApi
API interface for wizard instances.
interface WizardContextApi<WizardValues extends Record<string, FieldValues>> {
// Step information
steps: (keyof WizardValues)[];
currentStep: keyof WizardValues | undefined;
isLastStep: boolean;
isFirstStep: boolean;
hasNoFooter: boolean;
isStepReady: boolean;
// Navigation
goNext(): Promise<void>;
goPrevious(): void;
goBackTo(step: keyof WizardValues): void;
// Data access
getValuesOfStep<Step extends keyof WizardValues>(stepName: Step): WizardValues[Step] | undefined;
getValuesOfCurrentStep<Step extends keyof WizardValues>(): WizardValues[Step] | undefined;
getValuesOfSteps(): WizardValues;
// Internal methods
// ... (implementation details)
}
Component Prop Types
FieldRenderProps
Props passed to Field render function.
interface FieldRenderProps<T extends FieldValues, K extends keyof T> {
name: K;
value: T[K] | undefined;
onFocus(): void;
onBlur(): void;
onChange(value: T[K] | undefined): void;
}
FieldRenderState
State information passed to Field render function.
interface FieldRenderState {
isPristine: boolean;
validationStatus: ValidationStatus;
}
isPristine
: Whether the field has been interacted with
validationStatus
: Current validation status and message
FieldProps
Props for the Field component.
interface FieldProps<T extends FieldValues, K extends keyof T> {
name: K;
children?: ReactNode; // Rules
render(fieldProps: FieldRenderProps<T, K>, fieldState: FieldRenderState): ReactNode | null;
data?: AnyRecord;
defaultValue?: T[K];
}
FormProps
Props for the Form component.
interface FormProps<T extends FieldValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
children: ReactNode;
form: FormContextApi<T>;
onSubmit?: () => void;
}
RuleProps
Props for the Rule component.
interface RuleProps {
validationFn: Validator;
message: string;
isDebounced?: boolean;
}
StepProps
Props for the Step component.
interface StepProps<WizardValues extends Record<string, FieldValues>, Step extends keyof WizardValues> {
children: ReactNode;
name: Step;
onNext?: StepValidator<WizardValues, Step>;
noFooter?: boolean;
title?: string;
}
Utility Functions
mapValidationStatusesToOutcome
Utility function to determine overall outcome from multiple validation statuses.
function mapValidationStatusesToOutcome(statuses: ValidationStatus[]): VALIDATION_OUTCOME;
Takes an array of validation statuses and returns:
VALID
if all are valid
INVALID
if any are invalid
UNDETERMINED
if any are undetermined and none are invalid
Generic Constraints
Most types use these constraints to ensure type safety:
// Form types must extend FieldValues
T extends FieldValues
// Field names must be keys of the form type
K extends keyof T
// Wizard values must be a record of FieldValues
WizardValues extends Record<string, FieldValues>
// Step names must be keys of WizardValues
Step extends keyof WizardValues
Example Type Usage
Strongly Typed Form
interface UserForm {
email: string;
password: string;
age: number;
isAdmin: boolean;
}
const form = useForm<UserForm>({
defaultValues: {
isAdmin: false
}
});
// Type-safe field access
const validations = useValidations(form, ['email', 'password']); // Only allows valid keys
const values = useOnChangeValues(form, ['email']); // values.email is string | undefined
Strongly Typed Wizard
interface RegistrationWizard {
personal: {
firstName: string;
lastName: string;
dateOfBirth: Date;
};
account: {
email: string;
password: string;
confirmPassword: string;
};
preferences: {
newsletter: boolean;
theme: 'light' | 'dark';
};
}
const wizard = useWizard<RegistrationWizard>(
(data) => {
// data is fully typed as RegistrationWizard
console.log(data.personal.firstName); // TypeScript knows this exists
}
);
// Type-safe step form
const { form } = useStepForm<RegistrationWizard, 'personal'>();
// form is typed for RegistrationWizard['personal'] only