Skip to content

Commit 2381555

Browse files
committed
[doc] No need to repeat the render prop doc in InfiniteList
1 parent 854d705 commit 2381555

File tree

2 files changed

+9
-30
lines changed

2 files changed

+9
-30
lines changed

docs/Edit.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -600,7 +600,7 @@ Note that the `redirect` prop is ignored if you set [the `mutationOptions` prop]
600600

601601
## `render`
602602

603-
Alternatively to `children`, you can use a `render` prop. It will receive the [`EditContext`](./useEditContext.md#return-value) as its argument, and should return a React node.
603+
Alternatively to `children`, you can use a `render` prop. It will receive the [`EditContext`](./useEditContext.md#return-value) as its argument, and should return a React node.
604604

605605
This allows to inline the render logic for the edition page.
606606

docs/InfiniteList.md

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -85,42 +85,16 @@ Check the [`<List>` component](./List.md) for details about each prop.
8585

8686
Additional props are passed down to the root component (a MUI `<Card>` by default).
8787

88-
## `render`
89-
90-
Alternatively to children you can pass a render prop to `<InfiniteList>`. The render prop will receive the list context as its argument, allowing to inline the render logic for the list content.
91-
When receiving a render prop the `<InfiniteList>` component will ignore the children property.
92-
93-
{% raw %}
94-
```tsx
95-
<InfiniteList
96-
render={({ error, isPending }) => {
97-
if (isPending) {
98-
return <div>Loading...</div>;
99-
}
100-
if (error) {
101-
return <div>Error: {error.message}</div>;
102-
}
103-
return (
104-
<SimpleList
105-
primaryText="%{title} (%{year})"
106-
secondaryText="%{summary}"
107-
tertiaryText={record => record.year}
108-
/>
109-
);
110-
}}
111-
/>
112-
```
113-
{% endraw %}
114-
11588
## `pagination`
11689

117-
You can replace the default "load on scroll" pagination (triggered by a component named `<InfinitePagination>`) by a custom pagination component. To get the pagination state and callbacks, you'll need to read the `InfinitePaginationContext`.
90+
You can replace the default "load on scroll" pagination (triggered by a component named `<InfinitePagination>`) by a custom pagination component. To get the pagination state and callbacks, you'll need to read the `InfinitePaginationContext`.
11891

11992
![load more button](./img/infinite-pagination-load-more.webp)
12093

12194
For example, here is a custom infinite pagination component displaying a "Load More" button at the bottom of the list:
12295

12396
{% raw %}
97+
12498
```jsx
12599
import { InfiniteList, useInfinitePaginationContext, DataTable } from 'react-admin';
126100
import { Box, Button } from '@mui/material';
@@ -153,6 +127,7 @@ export const BookList = () => (
153127
</InfiniteList>
154128
);
155129
```
130+
156131
{% endraw %}
157132

158133
## Showing The Record Count
@@ -162,6 +137,7 @@ One drawback of the `<InfiniteList>` component is that it doesn't show the numbe
162137
![Infinite list with total number of results](./img/infinite-pagination-count.webp)
163138

164139
{% raw %}
140+
165141
```jsx
166142
import { useListContext, InfinitePagination, InfiniteList } from 'react-admin';
167143
import { Box, Card, Typography } from '@mui/material';
@@ -191,15 +167,17 @@ export const BookList = () => (
191167
</InfiniteList>
192168
);
193169
```
170+
194171
{% endraw %}
195172

196173
## Controlled Mode
197174

198-
`<InfiniteList>` deduces the resource and the list parameters from the URL. This is fine for a page showing a single list of records, but if you need to display more than one list in a page, you probably want to define the list parameters yourself.
175+
`<InfiniteList>` deduces the resource and the list parameters from the URL. This is fine for a page showing a single list of records, but if you need to display more than one list in a page, you probably want to define the list parameters yourself.
199176

200177
In that case, use the [`resource`](./List.md#resource), [`sort`](./List.md#sort), and [`filter`](./List.md#filter-permanent-filter) props to set the list parameters.
201178

202179
{% raw %}
180+
203181
```jsx
204182
import { InfiniteList, InfinitePagination, SimpleList } from 'react-admin';
205183
import { Container, Typography } from '@mui/material';
@@ -236,6 +214,7 @@ const Dashboard = () => (
236214
</Container>
237215
)
238216
```
217+
239218
{% endraw %}
240219

241220
## Headless Version

0 commit comments

Comments
 (0)