ShowLive

<ShowLive> is a drop-in replacement for <Show> that subscribes to realtime events for the displayed record. When an updated or deleted event arrives on resource/<name>/<id> — or when the transport reconnects — the record is automatically re-fetched.

Installation

pnpm dlx shadcn@latest add @shadmin/show-live

Usage

Replace <Show> with <ShowLive> on any show page:

import { SimpleShowLayout, TextField, DateField } from "@/components/admin";
import { ShowLive } from "@/components/realtime";
 
export const PostShow = () => (
  <ShowLive>
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="body" />
      <DateField source="publishedAt" />
    </SimpleShowLayout>
  </ShowLive>
);

Props

<ShowLive> accepts every prop that <Show> accepts.

Prop	Required	Type	Default	Description
`children`	Optional*	`ReactNode`	—	Layout component (e.g. `<SimpleShowLayout>`)
`render`	Optional*	`function`	—	Alternate render receiving the show context
`...showProps`	Optional	—	—	All `<Show>` props are forwarded unchanged

* Provide either children or render.

Notes

Internally renders <Show> plus a hidden <ShowLiveSubscription> that calls useSubscribeToRecord and useOnReconnect.
The subscription targets resource/<name>/<id> — the specific record being displayed.
Pair with <LockStatus> inside the layout to show who is currently editing the record.