> Small project based on react-hook-form that exposes an API for easily creating customizable forms based on a JSON Schema with built-in validation.
react-hook-form-jsonschema is a React hooks library that manages all the stateful logic needed to make a functional form based on a JSON Schema. It returns a set of props that are meant to be called and their results destructured on the desired input field.
And suppose you want to create a form field for the firstName field, simply use the useInput() hook and render the form using react:
`JSX function FirstNameField(props) { const inputMethods = useInput('#/properties/firstName');
return (
) } `
Installation
With npm:
` npm install react-hook-form-jsonschema --save `
Or with yarn:
` yarn add react-hook-form-jsonschema `
API
This is the API documentation, react-hook-form-jsonschema also re-exports all the react-hook-form types and the Controller component. All of the other functionalities are abstracted by this library.
Components API
$3
This component is the top-level component that creates the context with the schema and options all the hooks will need to be usable. So bear in mind that you need to define all the other components as children of FormContext.
#### props:
##### Required:
- schema: JSON Schema object which will be passed down by context for the inputs to use it for validation and the structure of the form itself.
##### Optional:
- customValidators: An object where each member has to be a funtion with the following format: - function(value: string, context: SubSchemaInfo) => CustomValidatorReturnValue - params: - value: Is the current value in the form input. - context: Is an object with the following fields: - JSONSchema: Is the sub schema of the current field - isRequired: Whether the current field is required or not - objectName: The name of the sub schema - invalidPointer: A boolean indicating whether the referenced field was found within the schema or not. If it is false it is because of an error in the schema. - pointer: JSON Pointer to sub schema that should be validated. The pointer is always in the form: #/properties/some/properties/data where # represents the root of the schema, and the properties/some/properties/data represents the tree of objects (from some to data) to get to the desired field, which in this case is data. Also see the definition of JSON Pointers on RFC 6901. - return value: Must be either a string that identifies the error or a true value indicating the validation was succesfull. - formProps: An object that is passed to the underlying