Any way to add a custom renderer in the standalone React version?

General
1

Any way to add a custom renderer in the standalone React version? The “stars” renderer tutorial seems to require Redux? Presumably a multi-select drop-down renderer (as discussed slightly in previous questions) would require a very simple renderer, but I’m not sure where to start (or if it’s even possible), given the star tutorial seems so far from what I’m after.

[original thread by econtentmaps]

2

Hi! The JsonForms component has a renderers prop in which the custom renderer can be added, e.g.

import { rankWith, scopeEndsWith } from '@jsonforms/core';
import { Rating } from './Rating';

// ...

const RatingControl = ({ data, handleChange, path }) => (
  <Rating
    value={data}
    onClick={ev => handleChange(path, Number(ev.value))}
  />
);

// ...

<JsonForms
  schema={schema}
  uischema={uischema}
  data={stateData}
  renderers={[
    ...materialRenderers,
    //register custom renderer
    { tester: rankWith(3,scopeEndsWith('rating')), renderer: RatingControl }
  ]}
/>

Note that a future version of JsonForms will work better when wrapping your custom renderer set in useMemo or defining it outside of your component to avoid unnecessary rerenderings.

You can find more information and the difference to the Redux version in our FAQ

3

In short what you should do to implement the multi-select drop-down renderer:

  • Write a custom multi-select component which full fills all your requirements

  • Think about how the JSON Schema for that element shall look like (for example array of strings)

  • Write your custom renderer which integrates your custom multi-select component with JSON Forms, e.g. fills in the props of the multi-select component based on the JSON Schema and calls the provided handleChange to write the data back to JSON Forms. For a more complex example than the RatingControl see the MaterialSliderControl.

  • Register your renderer with an appropriate tester checking for the JSON Schema configuration you specified above

That should be it. Let me know when you have further questions or need more advice :wink: