Reference
A reference to all of the functions and interfaces available in
canathus.
--useInput--
React hook for creating and displaying validated form data.
Usage:
const [data, setData] = useInput<string>("", validator)
return <input value={data.value} onChange={e => setData(e.target.value)}>
Parameters
-
initialValue: Value to initialise the form
data with.
-
validator: Function which evaluates whether
the current value is valid.
Returns
-
data:
InputData object containing
both the form data, as well as any error state.
-
setData: Function which updates the value of
data.
Limitations
-
Currently state cannot be updated using a function
as with React `useState`. This is planned to be
implemented at a later date.
--validate--
Function to evaluate whether the current values of form data
objects are valid.
Usage:
const fields = { TitleData, TextData };
const valid = validate(fields);
Parameters
-
fields:
ValidateFields object
containing
InputData objects. Each
will be validated with their own validate functions.
Returns
-
allValid: Boolean value which is true if all
fields are valid.
--InputData--
Interface for form data object.
interface InputData<Datatype> {
value: Datatype;
error: boolean;
errorMsg: string;
validator: (value: Datatype) => { valid: boolean; errorMsg?: string };
setError: (newError: boolean, newErrorMsg?: string) => void;
}
Properties
- value: The current value of the data.
-
error: Boolean value decscribing whether
there is an error.
- errorMsg: Error message to display.
-
validator: Function which should return an
object containing whether the current data value is
valid, as well as an optional error message.
-
setError: Function used interanlly to update
the value of an error.
--ValidateFields--
Interface for passing fields to
validate.
interface ValidateFields<Datatype> {
[key: string]: InputData<Datatype>;
}
Properties
-
key: pass an InputData object which will be
validated.