Hi @lll,
JSON Forms has two main artifacts: The JSON Schema, describing the data, and the UI Schema (optionally) describing the layout. Rendering is taken over by renderer-tester pairs: Whenever an UI Element is to be rendered, the testers will receive the UI element as well as the corresponding (sub)-JSON schema and then indicate whether they want to take over rendering that element.
The renderer then receives the same props which were used for the dispatching process and they also have access to the form wide state. Our bindings then take the props and the form-wide state and derive all the necessary props for the renderer, e.g. label
, errors
, visible
, enabled
etc.
The renderer is also given the respective schema
and uischema
as props.
Usually that information is enough to render everything needed. The benefit of being JSON Schema
based is that most data should be handed over in a declarative way. In your case I would expect that the JSON Schema contains a oneOf
construct of const
values which each have a title
and/or description, e.g.
{
"type": "object",
"properties": {
"plan": {
"type": "string",
"description": "Select a plan based on the size and needs of your team.",
"oneOf": [
{
"const": "basic",
"title": "Basic",
"description": "Perfect for individuals and small teams."
},
{
"const": "pro",
"title": "Pro",
"description": "For growing teams and businesses."
},
{
"const": "enterprise",
"title": "Enterprise",
"description": "For large organizations and custom solutions."
}
]
}
},
}
In this case you can access all of this information in the schema
prop handed over to your custom renderer for plan
, no custom props are needed.
In case you can’t adapt the schemas used and you actually need to inject some custom props into your renderer, then you need to use React contexts. With them you can inject arbitrary information and callbacks into your renderers from outside of JSON Forms.
Alternatively, if your schemas are more simple, for example like this:
{
"type": "object",
"properties": {
"plan": {
"type": "string",
"enum": ["basic", "pro", "enterprise"],
}
},
}
Then you could either add all the additional text in your UI Schema element, or you use the i18n support of JSON Forms to derive the additional labels in your custom renderer.