react-jsonschema-form
react-jsonschema-form copied to clipboard
Feature request: allow string identifiers in uiSchema to map to React components
The use of a React component as a help element for a certain field is great for custom help blocks where a single string is not enough. In my current project I'm working with a form that has a textarea field that expects JSON input with certain shape so I would like to show a toggle button to show/hide advanced help for the field (custom HTML containing tables, syntax highlighted examples, etc.).
It is currently possible to pass a React component as the ui:help
value of a certain field's uiSchema, but there's no way to do that if you expose the uiSchema in pure JSON, so you have to build the uiSchema in your app code.
It would be great if you can register all the help components at once by passing a prop to the Form component, and reference their identifier from the uiSchema, just like you can do with custom fields and custom widgets:
const MyCustomHelpBlock = (props) => {
return (
<div>Fancy HTML help block...</div>
);
};
const helpBlocks = {
myCustomHelpBlock: MyCustomHelpBlock
};
const uiSchema = {
"ui:helpBlock": "myCustomHelpBlock"
}
render(<Form
schema={schema}
uiSchema={uiSchema}
helpBlocks={helpBlocks} />);
That's something we also wanted to do for the paragraph ui:widget
because we want to be able to use it even if we decide that it is not in the scope of react-jsonschema-form for instance.
I like this idea.
Notes:
- We should ensure custom help components are not rendered within a
<p>
tag as currently - We could broaden the concept of registering component identifiers to any kind of use within the uiSchema where strings are expected, so we could reference them for other pieces than help widgets. I need to wrap my head around this idea.
(The <p>
tag mentioned by @n1k0 is no longer an issue.)
Here's my proposal:
const schema = {
type: "string"
};
const components = {
"helpText1": () => <div>My widget here</div>
};
const uiSchema = {
"ui:help": {"component": "helpText1"}
};
render((
<Form schema={schema}
uiSchema={uiSchema}
components={components} />
), document.getElementById("app"));
Essentially, we would pass in custom components through the components
prop, and then access them by doing {"component": "[component name]"}
. What do you think?