Custom Formatters
Write your own formatter function or register one by name
Custom Formatters
Any formatter is just a function (value, options) => value. You can pass one inline, or register it once and reference it by name anywhere.
Inline function
validationSchema: {
plate: {
format: (value, options) =>
typeof value === "string" ? value.replace(/-/g, " ").toUpperCase() : value,
},
}Registered formatter
Register a named formatter once, then use it in any field:
import { registerFormatter, useForm } from "formify-js";
registerFormatter("licensePlate", (value, options = {}) => {
const region = options.region ?? "EU";
// ...return the formatted string (or undefined to skip)
});
validationSchema: {
plate: { format: { type: "licensePlate", options: { region: "US" } } },
}Things to know
- Return
undefinedfrom a formatter to leave the value unchanged for that pass. optionscome from theformatconfig'soptionsobject.- Formatter functions are also exported for standalone use (
ssn(value),applyMask(digits, mask), …) — handy for formatting on display.