|
1 | 1 | --- |
2 | | -layout: default |
3 | | -title: "The useGetRecordRepresentation Hook" |
| 2 | +title: "useGetRecordRepresentation" |
4 | 3 | --- |
5 | 4 |
|
6 | | -# `useGetRecordRepresentation` |
7 | | - |
8 | | -Get a function that returns the record representation, leveraging the [`<Record recordRepresentation>`](./Resource.md#recordrepresentation) prop. |
| 5 | +Get a function that returns the record representation, leveraging the [`<Record recordRepresentation>`](../app-configuration/Resource.md#recordrepresentation) prop. |
9 | 6 |
|
10 | 7 | You can also use the component version: [`<RecordRepresentation>`](./RecordRepresentation.md). |
11 | 8 |
|
12 | 9 | ## Usage |
13 | 10 |
|
14 | | -{% raw %} |
15 | 11 | ```tsx |
16 | 12 | // in src/posts/PostBreadcrumbs.tsx |
17 | 13 | import * as React from 'react'; |
18 | | -import { Breadcrumbs, Typography } from '@mui/material'; |
19 | | -import { Link, useGetRecordRepresentation, useRecordContext } from 'react-admin'; |
| 14 | +import { Link } from 'react-router-dom'; |
| 15 | +import { useGetRecordRepresentation, useRecordContext } from 'ra-core'; |
20 | 16 |
|
21 | 17 | export const PostBreadcrumbs = () => { |
22 | 18 | const record = useRecordContext(); |
23 | 19 | const getRecordRepresentation = useGetRecordRepresentation('posts'); |
24 | 20 | return ( |
25 | | - <div role="presentation"> |
26 | | - <Breadcrumbs aria-label="breadcrumb"> |
27 | | - <Link underline="hover" color="inherit" to="/"> |
28 | | - Home |
29 | | - </Link> |
30 | | - <Link underline="hover" color="inherit" to="/posts"> |
31 | | - Posts |
32 | | - </Link> |
33 | | - <Typography sx={{ color: "text.primary" }}> |
| 21 | + <nav aria-label="breadcrumb"> |
| 22 | + <ol className="breadcrumb"> |
| 23 | + <li className="breadcrumb-item"> |
| 24 | + <Link to="/">Home</Link> |
| 25 | + </li> |
| 26 | + <li className="breadcrumb-item"> |
| 27 | + <Link to="/posts">Posts</Link> |
| 28 | + </li> |
| 29 | + <li className="breadcrumb-item active" aria-current="page"> |
34 | 30 | {getRecordRepresentation(record)} |
35 | | - </Typography> |
36 | | - </Breadcrumbs> |
37 | | - </div> |
| 31 | + </li> |
| 32 | + </ol> |
| 33 | + </nav> |
38 | 34 | ); |
39 | 35 | } |
40 | 36 |
|
41 | 37 | // in src/posts/PostEdit.tsx |
42 | | -import { EditBase, EditView, SimpleForm, TextInput } from 'react-admin'; |
| 38 | +import { EditBase, Form } from 'ra-core'; |
| 39 | +import { TextInput } from './TextInput'; |
43 | 40 | import { PostBreadcrumbs } from './PostBreadcrumbs'; |
44 | 41 |
|
45 | 42 | const PostEdit = () => ( |
46 | 43 | <EditBase> |
47 | 44 | <PostBreadcrumbs /> |
48 | | - <EditView> |
49 | | - <SimpleForm> |
| 45 | + <div> |
| 46 | + <Form> |
50 | 47 | <TextInput source="title" /> |
51 | | - </SimpleForm> |
52 | | - </EditView> |
| 48 | + </Form> |
| 49 | + </div> |
53 | 50 | </EditBase> |
54 | 51 | ) |
55 | 52 | ``` |
56 | | -{% endraw %} |
57 | 53 |
|
58 | 54 | ## Default Representation |
59 | 55 |
|
60 | | -When [`<Resource recordRepresentation>`](./Resource.md#recordrepresentation) is not defined, `useGetRecordRepresentation` will return the first non-empty field from this list: |
| 56 | +When [`<Resource recordRepresentation>`](../app-configuration/Resource.md#recordrepresentation) is not defined, `useGetRecordRepresentation` will return the first non-empty field from this list: |
61 | 57 | 1. `name` |
62 | 58 | 2. `title` |
63 | 59 | 3. `label` |
|
0 commit comments