Skip to content

Commit c44e43a

Browse files
MadeorskMadeorsk
committed
Fix WithListContext props order.
1 parent 55ee73b commit c44e43a

File tree

1 file changed

+62
-62
lines changed

1 file changed

+62
-62
lines changed

‎docs/WithListContext.md

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -84,67 +84,12 @@ Whether you use `<WithListContext>` or `useListContext` is a matter of coding st
8484

8585
`<WithListContext>` accepts a single `render` prop, which should be a function.
8686

87-
| Prop | Required | Type | Default | Description |
88-
|------------|----------|----------------|---------|---------------------------------------------------------|
89-
| `empty` | Optional | `ReactElement` | | The component to display when the data is empty. |
90-
| `error` | Optional | `ReactElement` | | The component to display in case of error. |
91-
| `loading` | Optional | `ReactElement` | | The component to display while checking authorizations. |
92-
| `render` | Required | `function` | | The function to render the data |
93-
94-
## `render`
95-
96-
A function which will be called with the current [`ListContext`](./useListContext.md) as argument. It should return a React element.
97-
98-
The [`ListContext`](./useListContext.md) contains the fetched array of records under the `data` key. You can use it to render a list of records:
99-
100-
```jsx
101-
<WithListContext render={({ data }) => (
102-
<ul>
103-
{data.map(record => (
104-
<li key={record.id}>{record.title}</li>
105-
))}
106-
</ul>
107-
)}>
108-
```
109-
110-
As a reminder, the [`ListContext`](./useListContext.md) is an object with the following properties:
111-
112-
```jsx
113-
<WithListContext render={({
114-
// fetched data
115-
data, // an array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }]
116-
total, // the total number of results for the current filters, excluding pagination. Useful to build the pagination controls, e.g. 23
117-
meta, // Additional information about the list, like facets & statistics
118-
isPending, // boolean that is true until the data is available for the first time
119-
isLoading, // boolean that is true until the data is fetched for the first time
120-
isFetching, // boolean that is true while the data is being fetched, and false once the data is fetched
121-
// pagination
122-
page, // the current page. Starts at 1
123-
perPage, // the number of results per page. Defaults to 25
124-
setPage, // a callback to change the page, e.g. setPage(3)
125-
setPerPage, // a callback to change the number of results per page, e.g. setPerPage(25)
126-
hasPreviousPage, // boolean, true if the current page is not the first one
127-
hasNextPage, // boolean, true if the current page is not the last one
128-
// sorting
129-
sort, // a sort object { field, order }, e.g. { field: 'date', order: 'DESC' }
130-
setSort, // a callback to change the sort, e.g. setSort({ field: 'name', order: 'ASC' })
131-
// filtering
132-
filterValues, // a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' }
133-
displayedFilters, // a dictionary of the displayed filters, e.g. { title: true, nationality: true }
134-
setFilters, // a callback to update the filters, e.g. setFilters(filters, displayedFilters)
135-
showFilter, // a callback to show one of the filters, e.g. showFilter('title', defaultValue)
136-
hideFilter, // a callback to hide one of the filters, e.g. hideFilter('title')
137-
// record selection
138-
selectedIds, // an array listing the ids of the selected rows, e.g. [123, 456]
139-
onSelect, // callback to change the list of selected rows, e.g. onSelect([456, 789])
140-
onToggleItem, // callback to toggle the selection of a given record based on its id, e.g. onToggleItem(456)
141-
onUnselectItems, // callback to clear the selection, e.g. onUnselectItems();
142-
// misc
143-
defaultTitle, // the translated title based on the resource, e.g. 'Posts'
144-
resource, // the resource name, deduced from the location. e.g. 'posts'
145-
refetch, // callback for fetching the list data again
146-
}) => ( ... )}>
147-
```
87+
| Prop | Required | Type | Default | Description |
88+
|-----------|----------|----------------|---------|---------------------------------------------------------|
89+
| `empty` | Optional | `ReactElement` | | The component to display when the data is empty. |
90+
| `error` | Optional | `ReactElement` | | The component to display in case of error. |
91+
| `loading` | Optional | `ReactElement` | | The component to display while checking authorizations. |
92+
| `render` | Required | `function` | | The function to render the data |
14893

14994
## `empty`
15095

@@ -214,6 +159,61 @@ If `loading` is not provided, the render function will be called with `isPending
214159
/>
215160
```
216161

162+
## `render`
163+
164+
A function which will be called with the current [`ListContext`](./useListContext.md) as argument. It should return a React element.
165+
166+
The [`ListContext`](./useListContext.md) contains the fetched array of records under the `data` key. You can use it to render a list of records:
167+
168+
```jsx
169+
<WithListContext render={({ data }) => (
170+
<ul>
171+
{data.map(record => (
172+
<li key={record.id}>{record.title}</li>
173+
))}
174+
</ul>
175+
)}>
176+
```
177+
178+
As a reminder, the [`ListContext`](./useListContext.md) is an object with the following properties:
179+
180+
```jsx
181+
<WithListContext render={({
182+
// fetched data
183+
data, // an array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }]
184+
total, // the total number of results for the current filters, excluding pagination. Useful to build the pagination controls, e.g. 23
185+
meta, // Additional information about the list, like facets & statistics
186+
isPending, // boolean that is true until the data is available for the first time
187+
isLoading, // boolean that is true until the data is fetched for the first time
188+
isFetching, // boolean that is true while the data is being fetched, and false once the data is fetched
189+
// pagination
190+
page, // the current page. Starts at 1
191+
perPage, // the number of results per page. Defaults to 25
192+
setPage, // a callback to change the page, e.g. setPage(3)
193+
setPerPage, // a callback to change the number of results per page, e.g. setPerPage(25)
194+
hasPreviousPage, // boolean, true if the current page is not the first one
195+
hasNextPage, // boolean, true if the current page is not the last one
196+
// sorting
197+
sort, // a sort object { field, order }, e.g. { field: 'date', order: 'DESC' }
198+
setSort, // a callback to change the sort, e.g. setSort({ field: 'name', order: 'ASC' })
199+
// filtering
200+
filterValues, // a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' }
201+
displayedFilters, // a dictionary of the displayed filters, e.g. { title: true, nationality: true }
202+
setFilters, // a callback to update the filters, e.g. setFilters(filters, displayedFilters)
203+
showFilter, // a callback to show one of the filters, e.g. showFilter('title', defaultValue)
204+
hideFilter, // a callback to hide one of the filters, e.g. hideFilter('title')
205+
// record selection
206+
selectedIds, // an array listing the ids of the selected rows, e.g. [123, 456]
207+
onSelect, // callback to change the list of selected rows, e.g. onSelect([456, 789])
208+
onToggleItem, // callback to toggle the selection of a given record based on its id, e.g. onToggleItem(456)
209+
onUnselectItems, // callback to clear the selection, e.g. onUnselectItems();
210+
// misc
211+
defaultTitle, // the translated title based on the resource, e.g. 'Posts'
212+
resource, // the resource name, deduced from the location. e.g. 'posts'
213+
refetch, // callback for fetching the list data again
214+
}) => ( ... )}>
215+
```
216+
217217
## Availability
218218

219219
Whenever you use a react-admin component to fetch a list of records, react-admin stores the data in a [`ListContext`](./useListContext.md). Consequently, `<WithListContext>` works in any component that is a descendant of:
@@ -305,4 +305,4 @@ const RefreshListButton = () => (
305305
<button onClick={refetch}>Refresh</button>
306306
)} />
307307
);
308-
```
308+
```

0 commit comments

Comments
 (0)