diff --git a/docs/Actions.md b/docs/Actions.md index 93c52b29e6b..5034d3463f5 100644 --- a/docs/Actions.md +++ b/docs/Actions.md @@ -7,7 +7,7 @@ title: "Querying the API" React-admin provides special hooks to emit read and write queries to the [`dataProvider`](./DataProviders.md), which in turn sends requests to your API. Under the hood, it uses [React Query](https://tanstack.com/query/v5/) to call the `dataProvider` and cache the results. - + ## Getting The `dataProvider` Instance @@ -670,7 +670,7 @@ The following hooks accept a `mutationMode` option: ## Forcing A Partial Refresh - + If you need to refresh part of the UI after a user action, you can use TanStack Query's [`invalidateQueries`](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation) function. This function invalidates the cache for a specific query key, forcing a refetch of the data. diff --git a/docs/Admin.md b/docs/Admin.md index 828b94030c6..3d640336179 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -10,7 +10,7 @@ The `` component is the root component of a react-admin app. It allows to `` creates a series of context providers to allow its children to access the app configuration. It renders the main routes and layout. It delegates the rendering of the content area to its `` children. - + ## Usage diff --git a/docs/ArrayInput.md b/docs/ArrayInput.md index c073b959e49..d1a32103387 100644 --- a/docs/ArrayInput.md +++ b/docs/ArrayInput.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-input-arrayinput--basic To edit arrays of data embedded inside a record, `` creates a list of sub-forms. - + ## Usage diff --git a/docs/Community.md b/docs/Community.md index 6aa7fb0554b..f295b3f25c4 100644 --- a/docs/Community.md +++ b/docs/Community.md @@ -45,7 +45,8 @@ On our [Youtube channel](https://www.youtube.com/@react-admin), you can find som
diff --git a/docs/Create.md b/docs/Create.md index 75173173877..70c68a3ff30 100644 --- a/docs/Create.md +++ b/docs/Create.md @@ -713,7 +713,7 @@ Note: In order to get the `mutationOptions` being considered, you have to set th ## Linking Two Inputs - + Edition forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former). diff --git a/docs/CreateReactAdmin.md b/docs/CreateReactAdmin.md index bf6fe7be886..4fc2f9e2ed9 100644 --- a/docs/CreateReactAdmin.md +++ b/docs/CreateReactAdmin.md @@ -7,7 +7,7 @@ title: "The create-react-admin CLI" Use `create-react-admin` to quickly bootstrap a react-admin project using [Vite](https://vitejs.dev/). It's the preferred way to create a new react-admin application. - + ## Usage diff --git a/docs/CustomRoutes.md b/docs/CustomRoutes.md index 03739db22ee..32d3edf95b1 100644 --- a/docs/CustomRoutes.md +++ b/docs/CustomRoutes.md @@ -8,7 +8,7 @@ storybook_path: ra-core-core-customroutes--authenticated-custom-route Lets you define custom pages in your react-admin application, using [react-router-dom](https://reactrouter.com/en/6/start/concepts#defining-routes) `` elements. - + ## Usage diff --git a/docs/DataProviderWriting.md b/docs/DataProviderWriting.md index 10f5f077ce8..6264e361011 100644 --- a/docs/DataProviderWriting.md +++ b/docs/DataProviderWriting.md @@ -7,7 +7,7 @@ title: "Writing A Data Provider" APIs are so diverse that quite often, none of [the available Data Providers](./DataProviderList.md) suit you API. In such cases, you'll have to write your own Data Provider. Don't worry, it usually takes only a couple of hours. - + The methods of a Data Provider receive a request, and return a promise for a response. Both the request and the response format are standardized. diff --git a/docs/DataProviders.md b/docs/DataProviders.md index c1c618d8d69..4945ea8a177 100644 --- a/docs/DataProviders.md +++ b/docs/DataProviders.md @@ -467,7 +467,7 @@ Some data providers, like `ra-data-simple-rest`, already support query cancellat ## Adding Lifecycle Callbacks - + It often happens that you need specific data logic to be executed before or after a dataProvider call. For instance, you may want to delete the comments related to a post before deleting the post itself. The general advice is to **put that code on the server-side**. If you can't, the next best place to put this logic is the `dataProvider`. @@ -528,7 +528,7 @@ Check the [withLifecycleCallbacks](./withLifecycleCallbacks.md) documentation fo If you need to build an app relying on more than one API, you may face a problem: the `` component accepts only one `dataProvider` prop. You can combine multiple data providers into one using the `combineDataProviders` helper. It expects a function as a parameter accepting a resource name and returning a data provider for that resource. - + For instance, the following app uses `ra-data-simple-rest` for the `posts` and `comments` resources, and `ra-data-local-storage` for the `user` resource: diff --git a/docs/DataTable.md b/docs/DataTable.md index 0a74352f79a..6a830c87375 100644 --- a/docs/DataTable.md +++ b/docs/DataTable.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-list-datatable--basic The `` component renders a list of records as a table. It supports sorting, row selection for bulk actions, a collapsible panel, hiding and reordering columns, dynamic row and cell styles, and more. - + ## Usage @@ -150,7 +150,7 @@ const PostList = () => ( Bulk action buttons appear when users select one or several rows. Clicking on a bulk action button affects all the selected records. This is useful for actions like mass deletion or mass edition. - + You can disable this feature by setting the `bulkActionButtons` prop to `false`: diff --git a/docs/Datagrid.md b/docs/Datagrid.md index da78b6ffda2..01ff4eba5bf 100644 --- a/docs/Datagrid.md +++ b/docs/Datagrid.md @@ -10,7 +10,7 @@ storybook_path: ra-ui-materialui-list-datagrid--basic The `` component renders a list of records as a table. It supports sorting, row selection for bulk actions, and an expand panel. It is usually used as a descendant of the [``](./List.md#list) and [``](./ReferenceManyField.md) components. Outside these components, it must be used inside a `ListContext`. - + ## Usage @@ -149,7 +149,7 @@ export default PostList; Bulk action buttons appear when users select one or several rows. Clicking on a bulk action button affects all the selected records. This is useful for actions like mass deletion or mass edition. - + You disable this feature by setting the `bulkActionButtons` prop to `false`: diff --git a/docs/Demos.md b/docs/Demos.md index fc7dc926bfd..ee49a4e6bf9 100644 --- a/docs/Demos.md +++ b/docs/Demos.md @@ -268,7 +268,7 @@ If you want to see what react-admin is capable of, or if you want to learn from The admin of a fictional poster shop, allowing to manage sales, products, customers and reviews. Built by the core team.
- +

@@ -362,7 +362,7 @@ The source shows how to implement the following features: Writer's Delight lets you write notes, essays, and stories with an AI assistant. Built by the core team. - + * Demo: [https://marmelab.com/writers-delight/](https://marmelab.com/writers-delight/) * Source code: [https://github.com/marmelab/writers-delight/](https://github.com/marmelab/writers-delight/) diff --git a/docs/Edit.md b/docs/Edit.md index 270df8962e8..1fa1d9c4fe5 100644 --- a/docs/Edit.md +++ b/docs/Edit.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-detail-edit--basic The `` component is the main component for edition pages. It fetches a record based on the URL, prepares a form submit handler, and renders the page title and actions. It is not responsible for rendering the actual form - that's the job of its child component (usually a form component, like [``](./SimpleForm.md)). This form component uses its children ([``](./Inputs.md) components) to render each form input. - + The `` component calls `dataProvider.getOne()`, using the `id` from the URL. It creates a `RecordContext` with the result. It also creates a [`SaveContext`](./useSaveContext.md) containing a `save` callback, which calls `dataProvider.update()` when executed, and [an `EditContext`](./useEditContext.md) containing both the record and the callback. @@ -1106,7 +1106,7 @@ The user will see alerts when other users update or delete the record. ## Linking Two Inputs - + Edition forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former). diff --git a/docs/EditGuesser.md b/docs/EditGuesser.md index ce17dcc156c..9b0132b7bb1 100644 --- a/docs/EditGuesser.md +++ b/docs/EditGuesser.md @@ -7,7 +7,7 @@ title: "The EditGuesser Component" Use `` to quickly bootstrap an Edit view on top of an existing API, without adding the inputs one by one. - + Just like [``](./Edit.md), `` fetches the data. It then analyzes the response, and guesses the inputs it should use to display a basic `` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code. diff --git a/docs/Fields.md b/docs/Fields.md index 044e6db6556..b2d242391f2 100644 --- a/docs/Fields.md +++ b/docs/Fields.md @@ -338,7 +338,7 @@ const { data } = useGetOne('posts', { id: 123, meta: { embed: ['author'] } }); ## Setting A Field Label - + React-admin Field layout components like [``](./Datagrid.md) and [``](./SimpleShowLayout.md) inspect their children and use their `label` prop to set the table headers or the field labels. @@ -472,7 +472,7 @@ const BookList = () => ( If you don't find what you need in the list of available Fields, you can write your own Field component. - + A custom field must be a regular React component retrieving the `record` from the `RecordContext` with the `useRecordContext` hook. React-admin will set the `record` in this context based on the API response data at render time. If you pass a `source`, the field component needs to find the corresponding value in the `record` and render it. diff --git a/docs/FieldsForRelationships.md b/docs/FieldsForRelationships.md index e678538409a..0dca348087c 100644 --- a/docs/FieldsForRelationships.md +++ b/docs/FieldsForRelationships.md @@ -16,7 +16,7 @@ React-admin handles relationships *regardless of the capacity of the API to mana React-admin provides helpers to fetch related records, depending on the type of relationship, and how the API implements it. - + ## One-To-Many diff --git a/docs/Form.md b/docs/Form.md index bf5e0ff2374..a7f67f66fe4 100644 --- a/docs/Form.md +++ b/docs/Form.md @@ -323,7 +323,7 @@ Check [the `` component](./AutoPersistInStore.md) documentat ## Linking Two Inputs - + Edition forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former). diff --git a/docs/Forms.md b/docs/Forms.md index 6bc785a52b9..cf224c23d2e 100644 --- a/docs/Forms.md +++ b/docs/Forms.md @@ -237,7 +237,7 @@ Check the [react-hook-form documentation](https://react-hook-form.com/docs) for ## Linking Two Inputs - + Forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former). @@ -651,7 +651,7 @@ Check [the `` component](./AutoPersistInStore.md) documentat ## Adding Fields With Labels - + All react-admin inputs handle the display of their label by wrapping their content inside a `` component. diff --git a/docs/FunctionField.md b/docs/FunctionField.md index 7063beaeee6..df512fd0c81 100644 --- a/docs/FunctionField.md +++ b/docs/FunctionField.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-functionfield--basic If you need a special function to render a field, `` is the perfect match. It executes a `render` function using the current record as parameter. - + ## Usage diff --git a/docs/Inputs.md b/docs/Inputs.md index 8c67489bac3..259c148a717 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -858,7 +858,7 @@ export default LatLngInput; ### Using `` - + This component lacks a label. React-admin provides the `` component for that: diff --git a/docs/Labeled.md b/docs/Labeled.md index 9fe2a05788e..50a4b1ead28 100644 --- a/docs/Labeled.md +++ b/docs/Labeled.md @@ -10,7 +10,7 @@ storybook_path: ra-ui-materialui-detail-labeled--basic ![Labeled](./img/Labeled.png) - + ## Usage diff --git a/docs/List.md b/docs/List.md index 36bd7f615b3..042f58f15a2 100644 --- a/docs/List.md +++ b/docs/List.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-list-list--basic The `` component is the root component for list pages. It fetches a list of records from the data provider, puts it in a [`ListContext`](./useListContext.md), renders the default list page layout (title, buttons, filters, pagination), and renders its children. Usual children of ``, like [``](./DataTable.md), are responsible for displaying the list of records. - + ## Usage diff --git a/docs/ListGuesser.md b/docs/ListGuesser.md index 36b2b5223e1..fad57d3897d 100644 --- a/docs/ListGuesser.md +++ b/docs/ListGuesser.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-list-listguesser--basic Use `` to quickly bootstrap a List view on top of an existing API, without adding the fields one by one. - + Just like [``](./List.md), `` fetches the data. It then analyzes the response, and guesses the fields it should use to display a basic `` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code. diff --git a/docs/NextJs.md b/docs/NextJs.md index 672ff80e2a1..6d4169962b6 100644 --- a/docs/NextJs.md +++ b/docs/NextJs.md @@ -7,7 +7,7 @@ title: "Next.Js Integration" React-admin runs seamlessly on [Next.js](https://nextjs.org/), with minimal configuration. - + Next.js 13 proposes 2 ways to build a React project: diff --git a/docs/NumberField.md b/docs/NumberField.md index a21ba0ebe8b..b10670b7888 100644 --- a/docs/NumberField.md +++ b/docs/NumberField.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-numberfield--basic Displays a number formatted according to the browser locale, right aligned. Ideal for floats, currencies, percentages, units, etc. - + ## Usage diff --git a/docs/Permissions.md b/docs/Permissions.md index d23b1c5e5c6..5093164bdec 100644 --- a/docs/Permissions.md +++ b/docs/Permissions.md @@ -5,7 +5,7 @@ title: "Authorization" # Authorization - + Once a user is authenticated, your application may need to check if the user has the right to access a specific resource or perform a particular action. React-admin provides two ways to do so: diff --git a/docs/ReferenceArrayField.md b/docs/ReferenceArrayField.md index 29a307d29cb..3449015d74c 100644 --- a/docs/ReferenceArrayField.md +++ b/docs/ReferenceArrayField.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-referencearrayfield--basic Use `` to display a list of related records, via a one-to-many relationship materialized by an array of foreign keys. - + `` fetches a list of referenced records (using the `dataProvider.getMany()` method), and puts them in a [`ListContext`](./useListContext.md). It then renders each related record, using its [`recordRepresentation`](./Resource.md#recordrepresentation), in a [``](./ChipField.md). diff --git a/docs/ReferenceField.md b/docs/ReferenceField.md index 28c78dc1771..61804ce4197 100644 --- a/docs/ReferenceField.md +++ b/docs/ReferenceField.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-referencefield--basic `` is useful for displaying many-to-one and one-to-one relationships, e.g. the details of a user when rendering a post authored by that user. - + ## Usage @@ -263,7 +263,7 @@ To override the style of all instances of `` using the [applicat ## Performance - + When used in a ``, `` fetches the referenced record only once for the entire table. diff --git a/docs/ReferenceFieldBase.md b/docs/ReferenceFieldBase.md index 5d85cd4f382..02dec7050aa 100644 --- a/docs/ReferenceFieldBase.md +++ b/docs/ReferenceFieldBase.md @@ -216,7 +216,7 @@ By default, when used in a ``, and when the user clicks on the column ## Performance - + When used in a [list context](./useListContext.md), `` fetches the referenced record only once for the entire table. diff --git a/docs/ReferenceInput.md b/docs/ReferenceInput.md index 0850ceed613..33c93f3e3d8 100644 --- a/docs/ReferenceInput.md +++ b/docs/ReferenceInput.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-input-referenceinput--basic Use `` for foreign-key values, for instance, to edit the `company_id` of a `contact` resource. - + ## Usage @@ -369,7 +369,7 @@ const filterToQuery = searchText => ({ name_ilike: `%${searchText}%` }); When users don't find the reference they are looking for in the list of possible values, they need to create a new reference. If they have to quit the current form to create the reference, they may lose the data they have already entered. So a common feature for `` is to let users create a new reference on the fly. - + Children of `` (``, ``, etc.) allow the creation of new choices via the `onCreate` prop. This displays a new "Create new" option in the list of choices. You can leverage this capability to create a new reference record. diff --git a/docs/ReferenceManyCount.md b/docs/ReferenceManyCount.md index 6309e453244..a136a0e86a0 100644 --- a/docs/ReferenceManyCount.md +++ b/docs/ReferenceManyCount.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-referencemanycount--basic When you need to render the number of records related to another record via a one-to-many relationship (e.g. the number of comments related to a post), use the `` component. It calls `dataProvider.getManyReference()` with the `pagination` parameter set to retrieve no data - only the total number of records. - + ## Usage diff --git a/docs/ReferenceManyField.md b/docs/ReferenceManyField.md index d083d7cef57..5bb3338d056 100644 --- a/docs/ReferenceManyField.md +++ b/docs/ReferenceManyField.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-fields-referencemanyfield--basic `` is useful for displaying a list of related records via a one-to-many relationship, when the foreign key is carried by the referenced resource. - + This component fetches a list of referenced records by a reverse lookup of the current `record.id` in the `target` field of another resource (using the `dataProvider.getManyReference()` REST method), and puts them in a [`ListContext`](./useListContext.md). Its children can then use the data from this context. The most common case is to use [``](./SingleFieldList.md) or [``](./DataTable.md) as child. diff --git a/docs/Resource.md b/docs/Resource.md index 4123c7d93ef..acbbcfb7edc 100644 --- a/docs/Resource.md +++ b/docs/Resource.md @@ -8,7 +8,7 @@ storybook_path: ra-core-core-resource--basic `` components define the CRUD routes of a react-admin application. - + In react-admin terms, a *resource* is a string that refers to an entity type (like 'products', 'subscribers', or 'tags'). *Records* are objects with an `id` field, and two records of the same *resource* have the same field structure (e.g. all posts records have a title, a publication date, etc.). diff --git a/docs/SelectInput.md b/docs/SelectInput.md index 75ce4b54f1a..639ed118fe1 100644 --- a/docs/SelectInput.md +++ b/docs/SelectInput.md @@ -8,7 +8,7 @@ storybook_path: ra-ui-materialui-input-selectinput--basic To let users choose a value in a list using a dropdown, use ``. It renders using [Material UI's `