`<ShowLive>`

<ShowLive> is an Enterprise EditionReact Admin Enterprise Edition icon component that renders a Show page. It shows a notification and refreshes the page when the record is updated by another user. Also, it displays a warning when the record is deleted by another user.

ShowLive

Usage

Use <ShowLive> instead of <Show>:

import { SimpleShowLayout, TextField } from 'react-admin';
import { ShowLive } from '@react-admin/ra-realtime';
const PostShow = () => (
 <ShowLive>
 <SimpleShowLayout>
 <TextField source="title" />
 </SimpleShowLayout>
 </ShowLive>
);

To trigger the <ShowLive> updates, the API has to publish events containing at least the following:

{
 topic : '/resource/{resource}/{recordIdentifier}',
 type: '{deleted || updated}',
 payload: { id: [{recordIdentifier}]},
}

<ShowLive> accepts the same props as <Show>. Refer to the <Show> documentation for more information.

`onEventReceived`

The <ShowLive> allows you to customize the side effects triggered when it receives a new event, by passing a function to the onEventReceived prop:

import { SimpleShowLayout, TextField, useRefresh } from 'react-admin';
import { ShowLive, EventType } from '@react-admin/ra-realtime';
const PostShow = () => {
 const notify = useNotify();
 const handleEventReceived = (event, { setDeleted }) => {
 if (event.type === EventType.Updated) {
 notify('Record updated');
 refresh();
 } else if (event.type === EventType.Deleted) {
 notify('Record deleted');
 setDeleted(true);
 }
 };
 return (
 <ShowLive onEventReceived={handleEventReceived}>
 <SimpleShowLayout>
 <TextField source="title" />
 </SimpleShowLayout>
 </ShowLive>
 );
};

The function passed to onEventReceived will be called with the event as its first argument and an object containing functions that will update the UI:

setDeleted: If set to true, the edit view will show a message to let users know this record has been deleted.