Skip to content

[Chore]: Update react-admin to use ReactNode instead of ReactElement where applicable #10996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 31, 2025
+177 −196
Merged

[Chore]: Update react-admin to use ReactNode instead of ReactElement where applicable #10996

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b12a15
Chore: Use ReactNode instead of ReactElement where applicable
jonathanarnault Oct 20, 2025
491e44d
Rollback chanf of UseResourceDefinitionOptions.recordRepresentation
jonathanarnault Oct 20, 2025
0a387f2
Chore: Use ReactNode instead of ReactElement where applicable in ra-core
jonathanarnault Oct 23, 2025
bddeb48
Update Show/Edit/Create/List props types in documentation
jonathanarnault Oct 23, 2025
b60e770
Fix: Improve code conventions for ReactNode
jonathanarnault Oct 29, 2025
324c0d7
Fix(recordRepresentation): Allow ReactNode
jonathanarnault Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/CheckForApplicationUpdate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const App = () => (
| --------------- | -------- | -------------- | ------------------ |-------------------------------------------------------------------- |
| `interval` | Optional | `number` | `3600000` (1 hour) | The interval in milliseconds between two checks |
| `disabled` | Optional | `boolean` | `false` | Whether the automatic check is disabled |
| `notification` | Optional | `ReactElement` | | The notification to display to the user when an update is available |
| `notification` | Optional | `ReactNode` | | The notification to display to the user when an update is available |
| `onNewVersion Available` | Optional | `function` | | The effect to execute when a new version is detected. |
| `url` | Optional | `string` | Current URL | The URL to download to check for code update |
| `fetchOptions` | Optional | `RequestInit | undefined` | `undefined` | The options passed to `fetch` when checking for an update |
Expand Down
2 changes: 1 addition & 1 deletion docs/Create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ You can customize the `<Create>` component using the following props:
| `redirect` | Optional | `string`/`function` | `'edit'` | Change the redirect location after successful creation |
| `resource` | Optional | `string` | From URL | Override the name of the resource to create |
| `sx` | Optional | `object` | - | Override the styles |
| `title` | Optional | `string`/`ReactNode` | Translation | Override the page title |
| `title` | Optional | `ReactNode` / `string` / `false` | Translation | Override the page title |
| `transform` | Optional | `function` | - | Transform the form data before calling `dataProvider.create()` |

`*` You must provide either `children` or `render`.
Expand Down
12 changes: 6 additions & 6 deletions docs/Datagrid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ Both are [Enterprise Edition](https://react-admin-ee.marmelab.com) components.

| Prop | Required | Type | Default | Description |
| -------------------- | -------- | ----------------------- | --------------------- | ------------------------------------------------------------- |
| `children` | Required | Element | n/a | The list of `<Field>` components to render as columns. |
| `body` | Optional | Element | `<Datagrid Body>` | The component used to render the body of the table. |
| `bulkActionButtons` | Optional | Element | `<BulkDelete Button>` | The component used to render the bulk action buttons. |
| `empty` | Optional | Element | `<Empty>` | The component used to render the empty table. |
| `expand` | Optional | Element | | The component used to render the expand panel for each row. |
| `children` | Required | `ReactNode` | n/a | The list of `<Field>` components to render as columns. |
| `body` | Optional | `ReactNode` | `<Datagrid Body>` | The component used to render the body of the table. |
| `bulkActionButtons` | Optional | `ReactNode` | `<BulkDelete Button>` | The component used to render the bulk action buttons. |
| `empty` | Optional | `ReactNode` | `<Empty>` | The component used to render the empty table. |
| `expand` | Optional | `ReactNode` | | The component used to render the expand panel for each row. |
| `expandSingle` | Optional | Boolean | `false` | Whether to allow only one expanded row at a time. |
| `header` | Optional | Element | `<Datagrid Header>` | The component used to render the table header. |
| `header` | Optional | `ReactNode` | `<Datagrid Header>` | The component used to render the table header. |
| `hover` | Optional | Boolean | `true` | Whether to highlight the row under the mouse. |
| `isRowExpandable` | Optional | Function | `() => true` | A function that returns whether a row is expandable. |
| `isRowSelectable` | Optional | Function | `() => true` | A function that returns whether a row is selectable. |
Expand Down
2 changes: 1 addition & 1 deletion docs/Edit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ You can customize the `<Edit>` component using the following props:
| `redirect` | Optional | `'list'` &#124; `'show'` &#124; `false` &#124; `function` | `'list'` | Change the redirect location after successful update |
| `resource` | Optional | `string` | - | Override the name of the resource to edit |
| `sx` | Optional | `object` | - | Override the styles |
| `title` | Optional | `string` &#124; `ReactNode` &#124; `false` | - | Override the page title |
| `title` | Optional | `ReactNode` / `string` / `false` | - | Override the page title |
| `redirectOnError` | Optional | `'list'` &#124; `false` &#124; `function` | `'list'` | The page to redirect to when an error occurs |
| `transform` | Optional | `function` | - | Transform the form data before calling `dataProvider.update()` |

Expand Down
6 changes: 3 additions & 3 deletions docs/FilterList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ A more sophisticated example is the filter sidebar for the visitors list visible
|------|----------|------|---------|-------------|
| [`children`](#children) | Required | node | | The children of `<FilterList>` must be a list of `<FilterListItem>` components. |
| [`icon`](#icon) | Optional | element | | When set, the `<FilterList icon>` prop appears on the left side of the filter label. |
| [`label`](#label) | Optional | string | | React-admin renders the `<FilterList label>` on top of the child filter items. The string is passed through the `useTranslate` hook, and therefore can be translated. |
| [`label`](#label) | Optional | `ReactNode` | | React-admin renders the `<FilterList label>` on top of the child filter items. The string is passed through the `useTranslate` hook, and therefore can be translated. |

## `children`

Expand Down Expand Up @@ -274,7 +274,7 @@ The children of `<FilterList>` must be a list of `<FilterListItem>` components.

| Prop | Required | Type | Default | Description |
|------|----------|------|---------|-------------|
| `label` | Required | string | | The label of the filter item. It is passed through the `useTranslate` hook, and therefore can be translated. |
| `label` | Required | `ReactNode` | | The label of the filter item. It is passed through the `useTranslate` hook, and therefore can be translated. |
| `value` | Required | object | | The value of the filter item. It is merged with the current filter value when enabled by the user. |
| `icon` | Optional | `ReactElement` | | When set, the icon appears to the left of the item label. |
| `isSelected` | Optional | function | | A function that receives the item value and the currently applied filters. It must return a boolean. |
Expand Down Expand Up @@ -372,4 +372,4 @@ export const BookList = () => (

![FilterLiveForm](./img/FilterLiveForm.png)

Check out the [`<FilterLiveForm>` documentation](./FilterLiveForm.md) for more information.
Check out the [`<FilterLiveForm>` documentation](./FilterLiveForm.md) for more information.
8 changes: 4 additions & 4 deletions docs/InfiniteList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@ The props are the same as [the `<List>` component](./List.md):
| `children` | Required if no render | `ReactNode` | - | The component to use to render the list of records. |
| `render` | Required if no children | `ReactNode` | - | A function that render the list of records, receives the list context as argument. |
| `actions` | Optional | `ReactElement` | - | The actions to display in the toolbar. |
| `aside` | Optional | `(listContext) => ReactElement` | - | The component to display on the side of the list. |
| `aside` | Optional | `(listContext) => ReactNode` | - | The component to display on the side of the list. |
| `authLoading` | Optional | `ReactNode` | - | The component to render while checking for authentication and permissions. |
| `component` | Optional | `Component` | `Card` | The component to render as the root element. |
| `debounce` | Optional | `number` | `500` | The debounce delay in milliseconds to apply when users change the sort or filter parameters. |
| `disable Authentication` | Optional | `boolean` | `false` | Set to `true` to disable the authentication check. |
| `disable SyncWithLocation` | Optional | `boolean` | `false` | Set to `true` to disable the synchronization of the list parameters with the URL. |
| `empty` | Optional | `ReactElement` | - | The component to display when the list is empty. |
| `empty` | Optional | `ReactNode` | - | The component to display when the list is empty. |
| `empty WhileLoading` | Optional | `boolean` | `false` | Set to `true` to return `null` while the list is loading. |
| `error` | Optional | `ReactNode` | - | The component to render when failing to load the list of records. |
| `exporter` | Optional | `function` | - | The function to call to export the list. |
Expand All @@ -76,13 +76,13 @@ The props are the same as [the `<List>` component](./List.md):
| `filter DefaultValues` | Optional | `object` | - | The default filter values. |
| `loading` | Optional | `ReactNode` | - | The component to render while loading the list of records. |
| `offline` | Optional | `ReactNode` | `<Offline>` | The component to render when there is no connectivity and there is no data in the cache |
| `pagination` | Optional | `ReactElement` | `<Infinite Pagination>` | The pagination component to use. |
| `pagination` | Optional | `ReactNode` | `<Infinite Pagination>` | The pagination component to use. |
| `perPage` | Optional | `number` | `10` | The number of records to fetch per page. |
| `queryOptions` | Optional | `object` | - | The options to pass to the `useQuery` hook. |
| `resource` | Optional | `string` | - | The resource name, e.g. `posts`. |
| `sort` | Optional | `object` | - | The initial sort parameters. |
| `storeKey` | Optional | `string` | - | The key to use to store the current filter & sort. |
| `title` | Optional | `string` | - | The title to display in the App Bar. |
| `title` | Optional | `ReactNode` / `string` / `false` | - | The title to display in the App Bar. |
| `sx` | Optional | `object` | - | The CSS styles to apply to the component. |

Check the [`<List>` component](./List.md) for details about each prop.
Expand Down
6 changes: 3 additions & 3 deletions docs/List.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ You can find more advanced examples of `<List>` usage in the [demos](./Demos.md)
| `children` | Optional&nbsp;* | `ReactNode` | - | The components rendering the list of records. |
| `render` | Optional&nbsp;* | `(listContext) => ReactNode` | - | A function to render the list of records. Receive the list context as its argument |
| `actions` | Optional | `ReactElement` | - | The actions to display in the toolbar. |
| `aside` | Optional | `ReactElement` | - | The component to display on the side of the list. |
| `aside` | Optional | `ReactNode` | - | The component to display on the side of the list. |
| `authLoading` | Optional | `ReactNode` | - | The component to render while checking for authentication and permissions. |
| `component` | Optional | `Component` | `Card` | The component to render as the root element. |
| `debounce` | Optional | `number` | `500` | The debounce delay in milliseconds to apply when users change the sort or filter parameters. |
| `disable Authentication` | Optional | `boolean` | `false` | Set to `true` to disable the authentication check. |
| `disable SyncWithLocation` | Optional | `boolean` | `false` | Set to `true` to disable the synchronization of the list parameters with the URL. |
| `empty` | Optional | `ReactElement` | - | The component to display when the list is empty. |
| `empty` | Optional | `ReactNode` | - | The component to display when the list is empty. |
| `empty WhileLoading` | Optional | `boolean` | `false` | Set to `true` to return `null` while the list is loading. |
| `error` | Optional | `ReactNode` | - | The component to render when failing to load the list of records. |
| `exporter` | Optional | `function` | - | The function to call to export the list. |
Expand All @@ -79,7 +79,7 @@ You can find more advanced examples of `<List>` usage in the [demos](./Demos.md)
| `resource` | Optional | `string` | - | The resource name, e.g. `posts`. |
| `sort` | Optional | `object` | - | The initial sort parameters. |
| `storeKey` | Optional | `string` &#124; `false` | - | The key to use to store the current filter & sort. Pass `false` to disable store synchronization |
| `title` | Optional | `string` &#124;` ReactElement` &#124; `false` | - | The title to display in the App Bar. |
| `title` | Optional | `ReactNode` / `string` / `false` | - | The title to display in the App Bar. |
| `sx` | Optional | `object` | - | The CSS styles to apply to the component. |

`*` You must provide either `children` or `render`.
Expand Down
Loading
Loading