useShowContext

useShowContext grabs the data computed by useShowController when inside a <Show> or a <ShowBase> component.

Usage

You can use useShowContext inside show components to access the data computed by the controller.

import { useShowContext, SimpleShowLayout, Show } from 'react-admin';

const PostShowLayout = () => {
    const {
        defaultTitle, // the translated title based on the resource, e.g. 'Post #123'
        error,  // error returned by dataProvider when it failed to fetch the record. Useful if you want to adapt the view instead of just showing a notification using the `onError` side effect.
        isFetching, // boolean that is true while the record is being fetched, and false once the record is fetched
        isLoading, // boolean that is true until the record is available for the first time
        record, // record fetched via dataProvider.getOne() based on the id from the location
        refetch, // callback to refetch the record via dataProvider.getOne()
        resource, // the resource name, deduced from the location. e.g. 'posts'
    } = useShowContext();

    if (isLoading) {
        return <div>Loading...</div>;
    }
    if (error) {
        return <div>Error!</div>;
    }
    return (
        <>
            <h1>{defaultTitle}</h1>
            <SimpleShowLayout>
                <TextField source="title" />
                ...
            </SimpleShowLayout>
        </>
    );
};

const PostShow = () => (
    <Show>
        <PostShowLayout />
    </Show>
)

See Also

API