Allow custom renderer for reference editors

[stefanjudis]

Hello everybody. 👋

When using the reference and asset editors I'd love to have a way to control how the selected entry/asset is rendered in the Contentful UI.

Currently, the usage of these reference editors looks like below:

<SingleEntryReferenceEditor viewType="card" sdk={sdk} />

Unfortunately, there is no easy way to customize the rendering of selected entries other then re-implementing the whole reference component. I'd like to propose a way to make that possible.

Add a render prop

With a render prop developers could control how the entry would be rendered after it's selected.

<SingleEntryReferenceEditor viewType="card" sdk={sdk} renderEntry={(entry) => <h1>entry.fields.title</h1>}/>

In the above example, selected entries would only be rendered with an h1 element.

Pass down a component

The reference editors could accept an optional component to render the entry.

<ReferenceEditor customComponents={{ item: MyItem }} />

In the above example, selected entries would render as MyItem component.

---

Looking forward to your thoughts. :)