You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`<ShowBase>` fetches the record from the data provider via `dataProvider.getOne()`, puts it in a [`ShowContext`](./useShowContext.md), and renders its child. Use it to build a custom show page layout.
8
6
9
-
`<ShowBase>` is a headless variant of [`<Show>`](./Show.md). It fetches the record from the data provider via `dataProvider.getOne()`, puts it in a [`ShowContext`](./useShowContext.md), and renders its child. Use it to build a custom show page layout.
10
-
11
-
Contrary to [`<Show>`](./Show.md), it does not render the page layout, so no title, no actions, and no `<Card>`.
7
+
As a headless component, it does not render any layout by default.
12
8
13
9
`<ShowBase>` relies on the [`useShowController`](./useShowController.md) hook.
14
10
@@ -19,20 +15,20 @@ Use `<ShowBase>` instead of `<Show>` when you want a completely custom page layo
19
15
```jsx
20
16
// in src/posts.jsx
21
17
import*asReactfrom"react";
22
-
import { ShowBase } from'react-admin';
18
+
import { ShowBase } from'ra-core';
23
19
24
20
constPostShow= () => (
25
21
<ShowBase resource="posts">
26
-
<Grid container>
27
-
<Grid item xs={8}>
28
-
<SimpleShowLayout>
22
+
<div style={{ display:'flex' }}>
23
+
<div style={{ flex:2 }}>
24
+
<div>
29
25
...
30
-
</SimpleShowLayout>
31
-
</Grid>
32
-
<Grid item xs={4}>
26
+
</div>
27
+
</div>
28
+
<div style={{ flex:1 }}>
33
29
Show instructions...
34
-
</Grid>
35
-
</Grid>
30
+
</div>
31
+
</div>
36
32
<div>
37
33
Post related links...
38
34
</div>
@@ -44,15 +40,17 @@ Components using `<ShowBase>` can be used as the `show` prop of a `<Resource>` c
`<ShowBase>` renders its children wrapped by a `RecordContext`, so you can use any component that depends on such a context to be defined - including all [Field components](./Fields.md).
74
+
`<ShowBase>` renders its children wrapped by a `RecordContext`, so you can use any component that depends on such a context to be defined.
77
75
78
-
For instance, to display several fields in a single line, you can use Material UI’s `<Grid>` component:
76
+
For instance, to display several fields in a grid layout:
By default, the `<ShowBase>` component will automatically redirect the user to the login page if the user is not authenticated. If you want to disable this behavior and allow anonymous access to a show page, set the `disableAuthentication` prop to `true`.
114
116
115
117
```jsx
116
-
import { ShowBase } from'react-admin';
118
+
import { ShowBase } from'ra-core';
117
119
118
120
constPostShow= () => (
119
121
<ShowBase disableAuthentication>
@@ -127,7 +129,7 @@ const PostShow = () => (
127
129
By default, `<ShowBase>` deduces the identifier of the record to show from the URL path. So under the `/posts/123/show` path, the `id` prop will be `123`. You may want to force a different identifier. In this case, pass a custom `id` prop.
By default, `<ShowBase>` renders nothing when there is no connectivity and the record hasn't been cached yet. You can provide your own component via the `offline` prop:
158
160
159
161
```jsx
160
-
import { ShowBase } from'react-admin';
162
+
import { ShowBase } from'ra-core';
161
163
162
164
exportconstPostShow= () => (
163
165
<ShowBase offline={<p>No network. Could not load the post.</p>}>
**Tip**: If the record is in the Tanstack Query cache but you want to warn the user that they may see an outdated version, you can use the `<IsOffline>` component:
170
172
171
173
```jsx
172
-
import { ShowBase, IsOffline } from'react-admin';
174
+
import { ShowBase, IsOffline } from'ra-core';
173
175
174
176
exportconstPostShow= () => (
175
177
<ShowBase offline={<p>No network. Could not load the post.</p>}>
@@ -191,7 +193,7 @@ You can override this behavior and pass custom side effects by providing a custo
The `onError` function receives the error from the dataProvider call (`dataProvider.getOne()`), which is a JavaScript Error object (see [the dataProvider documentation for details](./DataProviderWriting.md#error-format)).
217
+
The `onError` function receives the error from the dataProvider call (`dataProvider.getOne()`), which is a JavaScript Error object (see [the dataProvider documentation for details](../data-fetching/DataProviderWriting.md#error-format)).
218
218
219
219
The default `onError` function is:
220
220
@@ -230,9 +230,8 @@ The default `onError` function is:
230
230
231
231
Alternatively, you can pass a `render` function prop instead of children. This function will receive the `ShowContext` as argument.
<ShowBase render={({ isPending, error, record }) => {
@@ -251,14 +250,13 @@ const BookShow = () => (
251
250
}}/>
252
251
);
253
252
```
254
-
{% endraw %}
255
253
256
254
## `resource`
257
255
258
256
By default, `<ShowBase>` operates on the current `ResourceContext` (defined at the routing level), so under the `/posts/1/show` path, the `resource` prop will be `posts`. You may want to force a different resource. In this case, pass a custom `resource` prop, and it will override the `ResourceContext` value.
The `<ShowBase>` component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](./Show.md#disableauthentication) prop.
272
+
The `<ShowBase>` component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the [`disableAuthentication`](#disableauthentication) prop.
275
273
276
-
If your `authProvider` implements [Access Control](./Permissions.md#access-control), `<ShowBase>` will only render if the user has the "show" access to the related resource.
274
+
If your `authProvider` implements [Access Control](../security/Permissions.md#access-control), `<ShowBase>` will only render if the user has the "show" access to the related resource.
0 commit comments