useRecordContext
useRecordContext
grabs the current record. Itβs available anywhere react-admin manipulates a record, e.g. in a Show page, in a Datagrid row, or in a Reference Field.
Usage
The most common use case for useRecordContext
is to build a custom field. For instance, an author field for a book Show view.
import { useRecordContext, Show, SimpleShowLayout } from 'react-admin';
const BookAuthor = () => {
const record = useRecordContext();
if (!record) return null;
return <span>{record.author}</span>;
};
const BookShow = () => (
<Show>
<SimpleShowLayout>
<BookAuthor />
...
</SimpleShowLayout>
</Show>
)
Optimistic Rendering
As react-admin uses optimistic rendering, useRecordContext
may return an undefined record on load. Make sure you prepare for that!
const BookAuthor = () => {
const record = useRecordContext();
// warning: this will fail on load since record is undefined
return <span>{record.author}</span>;
};
So make sure you check that the record is defined before using it.
const record = useRecordContext();
if (!record) return null;
Availability
As soon as there is a record available, react-admin puts it in a RecordContext
. This means that useRecordContext
works out of the box:
- in descendants of the
<Show>
and<ShowBase>
component - in descendants of the
<Edit>
and<EditBase>
component - in descendants of the
<Create>
and<CreateBase>
component - in descendants of the
<Datagrid>
component - in descendants of the
<SimpleList>
component - in descendants of the
<ReferenceField>
component
Creating a Record Context
If you have fetched a record
and you want to make it available to descendants, place it inside a <RecordContextProvider>
component.
import { useGetOne, RecordContextProvider } from 'react-admin';
const RecordFetcher = ({ id, resource, children }) => {
const { data, isLoading, error } = useGetOne(resource, { id });
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<RecordContextProvider record={data}>
{children}
</RecordContextProvider>
);
};
Fallback Mode
Some react-admin components accept an optional record prop. These components can be used both inside a RecordContext
, and with a custom record prop - without creating a custom record context.
You can do the same: just accept a record
component prop, and pass the props as parameter to the hook. If the record is undefined, useRecordContext
will return the record from the context. If it is defined, useRecordContext
will return the record from the props.
const BookAuthor = (props) => {
const record = useRecordContext(props);
if (!record) return null;
return <span>{record.author}</span>;
};
// you can now pass a custom record
<BookAuthor record={{ id: 123, author: 'Leo Tolstoy' }}>
See Also
WithRecord
is the render prop version of theuseRecordContext
hook.