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

**URL:** <https://jsonforms.discourse.group/t/any-way-to-add-a-custom-renderer-in-the-standalone-react-version/155>\
**Category:** General\
**Created:** [June 17, 2020, 12:03pm UTC](https://jsonforms.discourse.group/t/any-way-to-add-a-custom-renderer-in-the-standalone-react-version/155 "2020-06-17T12:03:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 17, 2020, 12:03pm UTC](https://jsonforms.discourse.group/t/any-way-to-add-a-custom-renderer-in-the-standalone-react-version/155/1 "2020-06-17T12:03:40Z")

</div>

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](https://spectrum.chat/jsonforms/general/any-way-to-add-a-custom-renderer-in-the-standalone-react-version-the-stars-renderer-tutorial-seems-to-require-redux-presumably-a-multiselect-dropdown-renderer-as-discussed-slightly-in-previous-questions-would-require-a-very-simple-renderer-but-im-not-sure-where-to-start-or-if-its-even-possible-given-the-star-tutorial-seems-so-far-from-what-im-after~bf98b9fc-a39f-42ec-b67e-3ac162cc6427) by econtentmaps]_

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 17, 2020, 12:19pm UTC](https://jsonforms.discourse.group/t/any-way-to-add-a-custom-renderer-in-the-standalone-react-version/155/2 "2020-06-17T12:19:55Z")

</div>

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

```auto
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](https://jsonforms.io/faq#how-can-i-integrate-a-custom-renderer)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [June 17, 2020, 12:31pm UTC](https://jsonforms.discourse.group/t/any-way-to-add-a-custom-renderer-in-the-standalone-react-version/155/3 "2020-06-17T12:31:59Z")

</div>

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 😉