When using JSON Forms within your react app, at some point you'll need to access the current form data.
For this purpose you can use the
onChange prop, which returns the form data and possible validation errors provided by AJV.
To get you started, we built two simple examples for you.
The first example showcases a class component:
The second example uses the functional component approach. Therefore we use the
useState hook, which provides the data (first parameter) and a function to update the data (second parameter).
Providing a custom renderer gives you full control of the rendered output, enabling you to integrate any custom behavior or pre-built component you'd like. To integrate a custom renderer follow these 3 steps:
- Create a custom renderer
- Create a tester (which tells JSON Forms for which UI schema element this renderer shall be used)
- Register the custom renderer and the tester
Using JSON Forms standalone we register the custom renderer directly on the JSON Forms component:
For more information about custom renderers, have a look here.
We use Ajv for handling JSON Schema's default values. To enable the creation of default values, you need to create a custom Ajv instance and hand it over to JSON Forms.
The following example shows the code for React, however the process is the same for Angular and Vue.
Now default values within the schema file can be used: