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 3 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` | 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
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.
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` | - | 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
4 changes: 2 additions & 2 deletions docs/ReferenceOneField.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const BookShow = () => (
| -------------- | -------- | ------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'book_details' |
| `target` | Required | string | - | Target field carrying the relationship on the referenced resource, e.g. 'book_id' |
| `children` | Optional&nbsp;* | `Element` | - | The Field element used to render the referenced record |
| `render` | Optional&nbsp;* | `(ReferenceFieldContext) => Element` | - | A function that takes the `ReferenceFieldContext` and returns a React element |
| `children` | Optional&nbsp;* | `ReactNode` | - | The Field element used to render the referenced record |
| `render` | Optional&nbsp;* | `(ReferenceFieldContext) => ReactNode` | - | A function that takes the `ReferenceFieldContext` and returns a React element |
| `empty` | Optional | `ReactNode` | - | The text or element to display when the referenced record is empty |
| `filter` | Optional | `Object` | `{}` | Used to filter referenced records |
| `link` | Optional | `string | Function` | `edit` | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
Expand Down
4 changes: 2 additions & 2 deletions docs/SimpleForm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ Here are all the props you can set on the `<SimpleForm>` component:

| Prop | Required | Type | Default | Description |
| ------------------------- | -------- | ------------------ | ------- | ---------------------------------------------------------- |
| `children` | Required | `element` | - | The form content. |
| `children` | Required | `ReactNode` | - | The form content. |
| `component` | Optional | `elementType` | `CardContent` | The component used to wrap the form. |
| `defaultValues` | Optional | `object| function` | - | The default values of the record. |
| `id` | Optional | `string` | - | The id of the underlying `<form>` tag. |
| `noValidate` | Optional | `boolean` | - | Set to `true` to disable the browser's default validation. |
| `onSubmit` | Optional | `function` | `save` | A callback to call when the form is submitted. |
| `sanitize EmptyValues` | Optional | `boolean` | - | Set to `true` to remove empty values from the form state. |
| `sx` | Optional | `object` | - | Custom styles |
| `toolbar` | Optional | `element` | - | The toolbar component. |
| `toolbar` | Optional | `ReactNode` | - | The toolbar component. |
| `validate` | Optional | `function` | - | A function to validate the form values. |
| `warnWhen UnsavedChanges` | Optional | `boolean` | - | Set to `true` to warn the user when leaving the form with unsaved changes. |

Expand Down
8 changes: 4 additions & 4 deletions docs/SimpleList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ export const PostList = () => (

| Prop | Required | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `primaryText` | Optional | mixed | record representation | The primary text to display. |
| `secondaryText` | Optional | mixed | | The secondary text to display. |
| `tertiaryText` | Optional | mixed | | The tertiary text to display. |
| `primaryText` | Optional | `ReactNode` or `function` | record representation | The primary text to display. |
| `secondaryText` | Optional | `ReactNode` or `function` | | The secondary text to display. |
| `tertiaryText` | Optional | `ReactNode` | or `function` | The tertiary text to display. |
| `rowClick` | Optional |mixed | `"edit"` | The action to trigger when the user clicks on a row. |
| `leftAvatar` | Optional | function | | A function returning an `<Avatar>` component to display before the primary text. |
| `leftIcon` | Optional | function | | A function returning an `<Icon>` component to display before the primary text. |
| `rightAvatar` | Optional | function | | A function returning an `<Avatar>` component to display after the primary text. |
| `rightIcon` | Optional | function | | A function returning an `<Icon>` component to display after the primary text. |
| `rowStyle` | Optional | function | | A function returning a style object to apply to each row. |
| `rowSx` | Optional | function | | A function returning a sx object to apply to each row. |
| `empty` | Optional | ReactElement | | A ReactElement to display instead of the list when the data is empty. |
| `empty` | Optional | `ReactNode` | | A `ReactNode` to display instead of the list when the data is empty. |

## `empty`

Expand Down
Loading
Loading