react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

Feature request: allow string identifiers in uiSchema to map to React components

Open pablen opened this issue 8 years ago • 3 comments

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} />);

pablen avatar May 25 '16 15:05 pablen

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.

Natim avatar May 25 '16 15:05 Natim

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.

n1k0 avatar May 25 '16 15:05 n1k0

(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?

epicfaace avatar Jan 21 '19 04:01 epicfaace