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.