ra-core

  • Version 5.0.5
  • Published
  • 5.48 MB
  • 11 dependencies
  • MIT license

Install

npm i ra-core
yarn add ra-core
pnpm add ra-core

Overview

Core components of react-admin, a frontend Framework for building admin applications on top of REST services, using ES6, React

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable AddNotificationContext

const AddNotificationContext: any;

    variable AUTH_CHECK

    const AUTH_CHECK: string;

      variable AUTH_ERROR

      const AUTH_ERROR: string;

        variable AUTH_GET_PERMISSIONS

        const AUTH_GET_PERMISSIONS: string;

          variable AUTH_LOGIN

          const AUTH_LOGIN: string;

            variable AUTH_LOGOUT

            const AUTH_LOGOUT: string;

              variable AuthContext

              const AuthContext: any;

                variable ChoicesContext

                const ChoicesContext: any;
                • Context to store choices and functions to retrieve them.

                  Use the useChoicesContext() hook to read the context.

                variable CREATE

                const CREATE: string;

                  variable CreateContext

                  const CreateContext: any;
                  • Context to store the result of the useCreateController() hook.

                    Use the useCreateContext() hook to read the context. That's what the Create components do in react-admin.

                    Example 1

                    import { useCreateController, CreateContextProvider } from 'ra-core';

                    const Create = props => { const controllerProps = useCreateController(props); return ( <CreateContextProvider value={controllerProps}> ... ); };

                  variable CustomRoutes

                  const CustomRoutes: { (_props: CustomRoutesProps): null; raName: string };
                  • This component allows you to provide custom routes to the Admin.

                    Parameter props

                    The component props

                    Parameter

                    props.children The custom routes.

                    Parameter

                    props.noLayout A boolean indicating whether to render the routes outside the Layout. Defaults to false.

                    Returns

                    Nothing. This is a configuration component.

                  variable DataProviderContext

                  const DataProviderContext: any;

                    variable DEFAULT_LOCALE

                    const DEFAULT_LOCALE: string;

                      variable defaultDataProvider

                      const defaultDataProvider: DataProvider<string>;

                        variable defaultExporter

                        const defaultExporter: Exporter<any>;

                          variable DefaultTitleContext

                          const DefaultTitleContext: any;

                            variable DefaultTitleContextProvider

                            const DefaultTitleContextProvider: any;

                              variable DELETE

                              const DELETE: string;

                                variable DELETE_MANY

                                const DELETE_MANY: string;

                                  variable EditContext

                                  const EditContext: any;
                                  • Context to store the result of the useEditController() hook.

                                    Use the useEditContext() hook to read the context. That's what the Edit components do in react-admin.

                                    Example 1

                                    import { useEditController, EditContextProvider } from 'ra-core';

                                    const Edit = props => { const controllerProps = useEditController(props); return ( <EditContextProvider value={controllerProps}> ... ); };

                                  variable ExporterContext

                                  const ExporterContext: any;

                                    variable fetchActionsWithArrayOfIdentifiedRecordsResponse

                                    const fetchActionsWithArrayOfIdentifiedRecordsResponse: string[];

                                      variable fetchActionsWithArrayOfRecordsResponse

                                      const fetchActionsWithArrayOfRecordsResponse: string[];

                                        variable fetchActionsWithRecordResponse

                                        const fetchActionsWithRecordResponse: string[];

                                          variable fetchActionsWithTotalResponse

                                          const fetchActionsWithTotalResponse: string[];

                                            variable FieldTitle

                                            const FieldTitle: React.MemoExoticComponent<{
                                            (props: FieldTitleProps): React.JSX.Element | null;
                                            displayName: string;
                                            }>;

                                              variable FormGroupContext

                                              const FormGroupContext: any;
                                              • Context allowing inputs to register to a specific group. This enables other components in the group to access group properties such as its validation (valid/invalid) or whether its inputs have been updated (dirty/pristine).

                                                This should only be used through a FormGroupContextProvider.

                                              variable FormGroupsContext

                                              const FormGroupsContext: any;

                                                variable GET_LIST

                                                const GET_LIST: string;

                                                  variable GET_MANY

                                                  const GET_MANY: string;

                                                    variable GET_MANY_REFERENCE

                                                    const GET_MANY_REFERENCE: string;

                                                      variable GET_ONE

                                                      const GET_ONE: string;

                                                        variable HasDashboardContext

                                                        const HasDashboardContext: any;

                                                          variable HasDashboardContextProvider

                                                          const HasDashboardContextProvider: any;

                                                            variable HIDE_FILTER

                                                            const HIDE_FILTER: string;

                                                              variable I18N_CHANGE_LOCALE

                                                              const I18N_CHANGE_LOCALE: string;

                                                                variable I18N_TRANSLATE

                                                                const I18N_TRANSLATE: string;
                                                                • i18nProvider types

                                                                variable I18nContext

                                                                const I18nContext: any;

                                                                  variable InferenceTypes

                                                                  const InferenceTypes: readonly [
                                                                  'array',
                                                                  'boolean',
                                                                  'date',
                                                                  'email',
                                                                  'id',
                                                                  'image',
                                                                  'number',
                                                                  'reference',
                                                                  'referenceChild',
                                                                  'referenceArray',
                                                                  'referenceArrayChild',
                                                                  'richText',
                                                                  'string',
                                                                  'url',
                                                                  'object'
                                                                  ];

                                                                    variable InfinitePaginationContext

                                                                    const InfinitePaginationContext: any;
                                                                    • Context to store the pagination callbacks from the useInfiniteListController() result.

                                                                      Use the useInfinitePaginationContext() hook to read the pagination callbacks.

                                                                      {Object} InfinitePaginationContextValue {Function} fetchNextPage a callback to fetch the next page {Function} fetchPreviousPage a callback to fetch the previous page

                                                                      Example 1

                                                                      import { useListController, ListPaginationContext } from 'ra-core';

                                                                      const List = props => { const { fetchNextPage, fetchPreviousPage } = useInfiniteListController(props); return ( <InfinitePaginationContext.Provider value={{ fetchNextPage, fetchPreviousPage }}> ... </InfinitePaginationContext.Provider> ); };

                                                                    variable injectedProps

                                                                    const injectedProps: string[];

                                                                      variable ListContext

                                                                      const ListContext: any;
                                                                      • Context to store the result of the useListController() hook.

                                                                        Use the useListContext() hook to read the context. That's what many List components do in react-admin (e.g. , , ).

                                                                        {Object} ListControllerProps {Array} data an array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }] {integer} total the total number of results for the current filters, excluding pagination. Useful to build the pagination controls. e.g. 23 {boolean} isFetching boolean that is true on mount, and false once the data was fetched {boolean} isLoading boolean that is false until the data is available {integer} page the current page. Starts at 1 {Function} setPage a callback to change the page, e.g. setPage(3) {integer} perPage the number of results per page. Defaults to 25 {Function} setPerPage a callback to change the number of results per page, e.g. setPerPage(25) {Object} sort a sort object { field, order }, e.g. { field: 'date', order: 'DESC' } {Function} setSort a callback to change the sort, e.g. setSort({ field: 'name', order: 'ASC' }) {Object} filterValues a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' } {Function} setFilters a callback to update the filters, e.g. setFilters(filters, displayedFilters) {Object} displayedFilters a dictionary of the displayed filters, e.g. { title: true, nationality: true } {Function} showFilter a callback to show one of the filters, e.g. showFilter('title', defaultValue) {Function} hideFilter a callback to hide one of the filters, e.g. hideFilter('title') {Array} selectedIds an array listing the ids of the selected rows, e.g. [123, 456] {Function} onSelect callback to change the list of selected rows, e.g. onSelect([456, 789]) {Function} onToggleItem callback to toggle the selection of a given record based on its id, e.g. onToggleItem(456) {Function} onUnselectItems callback to clear the selection, e.g. onUnselectItems(); {string} defaultTitle the translated title based on the resource, e.g. 'Posts' {string} resource the resource name, deduced from the location. e.g. 'posts' {Function} refetch a function for triggering a refetch of the list data

                                                                        Props {ListControllerResult} value

                                                                        Parameter

                                                                        {Props}

                                                                        Example 1

                                                                        import { useListController, ListContext } from 'ra-core';

                                                                        const List = props => { const controllerProps = useListController(props); return ( <ListContext.Provider value={controllerProps}> ... </ListContext.Provider> ); };

                                                                        See Also

                                                                        • useListController

                                                                        • useListContext

                                                                      variable ListFilterContext

                                                                      const ListFilterContext: any;
                                                                      • Context to store the filter part of the useListController() result.

                                                                        Use the useListFilterContext() hook to read the context. That's what many List components do in react-admin (e.g. , ).

                                                                        {Object} ListFilterContextValue {Object} filterValues a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' } {Function} setFilters a callback to update the filters, e.g. setFilters(filters, displayedFilters) {Object} displayedFilters a dictionary of the displayed filters, e.g. { title: true, nationality: true } {Function} showFilter a callback to show one of the filters, e.g. showFilter('title', defaultValue) {Function} hideFilter a callback to hide one of the filters, e.g. hideFilter('title') {string} resource the resource name, deduced from the location. e.g. 'posts'

                                                                        Props {ListFilterContextValue} value

                                                                        Parameter

                                                                        {Props}

                                                                        Example 1

                                                                        import { useListController, usePickFilterContext, ListFilterContext } from 'ra-core';

                                                                        const List = props => { const controllerProps = useListController(props); return ( <ListFilterContext.Provider value={usePickFilterContext(controllerProps)}> ... </ListFilterContext.Provider> ); };

                                                                        See Also

                                                                        • useListController

                                                                        • useListFilterContext

                                                                      variable ListPaginationContext

                                                                      const ListPaginationContext: any;
                                                                      • Context to store the pagination part of the useListController() result.

                                                                        Use the useListPaginationContext() hook to read the pagination information. That's what List components do in react-admin (e.g. ).

                                                                        {Object} ListPaginationContextValue {boolean} isLoading boolean that is false until the data is available {integer} total the total number of results for the current filters, excluding pagination. Useful to build the pagination controls. e.g. 23 {integer} page the current page. Starts at 1 {Function} setPage a callback to change the page, e.g. setPage(3) {integer} perPage the number of results per page. Defaults to 25 {Function} setPerPage a callback to change the number of results per page, e.g. setPerPage(25) {Boolean} hasPreviousPage true if the current page is not the first one {Boolean} hasNextPage true if the current page is not the last one

                                                                        {string} resource the resource name, deduced from the location. e.g. 'posts'

                                                                        Props {ListPaginationContextValue} value

                                                                        Parameter

                                                                        {Props}

                                                                        Example 1

                                                                        import { useListController, ListPaginationContext } from 'ra-core';

                                                                        const List = props => { const controllerProps = useListController(props); return ( <ListPaginationContext.Provider value={controllerProps}> ... </ListPaginationContext.Provider> ); };

                                                                        See Also

                                                                        • useListController

                                                                        • useListContext

                                                                      variable ListSortContext

                                                                      const ListSortContext: any;
                                                                      • Context to store the sort part of the useListController() result.

                                                                        Use the useListSortContext() hook to read the context. That's what many List components do in react-admin (e.g. ).

                                                                        {Object} ListSortContextValue {Object} sort a sort object { field, order }, e.g. { field: 'date', order: 'DESC' } {Function} setSort a callback to change the sort, e.g. setSort({ field: 'name', order: 'ASC' }) {string} resource the resource name, deduced from the location. e.g. 'posts'

                                                                        Props {ListSortContextValue} value

                                                                        Parameter

                                                                        {Props}

                                                                        Example 1

                                                                        import { useListController, usePickSortContext, ListSortContext } from 'ra-core';

                                                                        const List = props => { const controllerProps = useListController(props); return ( <ListSortContext.Provider value={usePickSortContext(controllerProps)}> ... </ListSortContext.Provider> ); };

                                                                        See Also

                                                                        • useListController

                                                                        • useListSortContext

                                                                      variable NotificationContext

                                                                      const NotificationContext: any;
                                                                      • Context for the notification state and modifiers

                                                                        Example 1

                                                                        // display notifications import { useNotificationContext } from 'react-admin';

                                                                        const App = () => { const { notifications } = useNotificationContext(); return ( {notifications.map(({ message }) => ( <li key={index}>{ message } ))} ); };

                                                                        Example 2

                                                                        // reset notifications import { useNotificationContext } from 'react-admin';

                                                                        const ResetNotificationsButton = () => { const { resetNotifications } = useNotificationContext(); return ( <button onClick={() => resetNotifications()}>Reset notifications ); };

                                                                      variable PreferenceKeyContext

                                                                      const PreferenceKeyContext: React.Context<string>;

                                                                        variable PreferencesEditorContext

                                                                        const PreferencesEditorContext: React.Context<PreferencesEditorContextValue>;

                                                                          variable PreviousLocationStorageKey

                                                                          const PreviousLocationStorageKey: string;
                                                                          • Key used to store the previous location in localStorage. Used by the useHandleAuthCallback hook to redirect the user to their previous location after a successful login.

                                                                          variable queryReducer

                                                                          const queryReducer: Reducer<ListParams, ActionTypes>;
                                                                          • This reducer is for the react-router query string.

                                                                          variable reactAdminFetchActions

                                                                          const reactAdminFetchActions: string[];

                                                                            variable RecordContext

                                                                            const RecordContext: React.Context<
                                                                            RaRecord<Identifier> | Omit<RaRecord<Identifier>, 'id'>
                                                                            >;
                                                                            • Context to store a record.

                                                                              See Also

                                                                              • RecordContextProvider

                                                                              • useRecordContext

                                                                            variable ReferenceFieldContext

                                                                            const ReferenceFieldContext: any;

                                                                              variable ReferenceFieldContextProvider

                                                                              const ReferenceFieldContextProvider: any;

                                                                                variable regex

                                                                                const regex: any;
                                                                                • Regular expression validator

                                                                                  Returns an error if the value does not match the pattern given as parameter

                                                                                  Parameter pattern

                                                                                  Parameter message

                                                                                  Example 1

                                                                                  const zipValidators = [regex(/^\d{5}(?:[-\s]\d{4})?$/, 'Must be a zip code')]; <TextInput name="zip" validate={zipValidators} />

                                                                                variable Resource

                                                                                const Resource: {
                                                                                (props: ResourceProps): React.JSX.Element;
                                                                                raName: string;
                                                                                registerResource({
                                                                                create,
                                                                                edit,
                                                                                icon,
                                                                                list,
                                                                                name,
                                                                                options,
                                                                                show,
                                                                                recordRepresentation,
                                                                                hasCreate,
                                                                                hasEdit,
                                                                                hasShow,
                                                                                }: ResourceProps): {
                                                                                name: string;
                                                                                options: import('../types').ResourceOptions | undefined;
                                                                                hasList: boolean;
                                                                                hasCreate: boolean;
                                                                                hasEdit: boolean;
                                                                                hasShow: boolean;
                                                                                icon: React.ComponentType<any> | undefined;
                                                                                recordRepresentation:
                                                                                | string
                                                                                | React.ReactElement<any, string | React.JSXElementConstructor<any>>
                                                                                | import('../types').RecordToStringFunction
                                                                                | undefined;
                                                                                };
                                                                                };

                                                                                  variable ResourceContext

                                                                                  const ResourceContext: any;
                                                                                  • Context to store the current resource name.

                                                                                    Use the useResource() hook to read the context. That's what most components do in react-admin.

                                                                                    Example 1

                                                                                    import { useResourceContext, useTranslate } from 'ra-core';

                                                                                    const MyCustomEditTitle = props => { const name = useResourceContext(props);

                                                                                    return ( {translate(${name}.name)} ); };

                                                                                  variable ResourceDefinitionContext

                                                                                  const ResourceDefinitionContext: React.Context<ResourceDefinitionContextValue>;

                                                                                    variable SaveContext

                                                                                    const SaveContext: any;

                                                                                      variable SET_FILTER

                                                                                      const SET_FILTER: string;

                                                                                        variable SET_PAGE

                                                                                        const SET_PAGE: string;

                                                                                          variable SET_PER_PAGE

                                                                                          const SET_PER_PAGE: string;

                                                                                            variable SET_SORT

                                                                                            const SET_SORT: string;

                                                                                              variable SHOW_FILTER

                                                                                              const SHOW_FILTER: string;

                                                                                                variable ShowContext

                                                                                                const ShowContext: any;
                                                                                                • Context to store the result of the useShowController() hook.

                                                                                                  Use the useShowContext() hook to read the context. That's what the Show components do in react-admin.

                                                                                                  Example 1

                                                                                                  import { useShowController, ShowContextProvider } from 'ra-core';

                                                                                                  const Show = props => { const controllerProps = useShowController(props); return ( <ShowContextProvider value={controllerProps}> ... ); };

                                                                                                variable SORT_ASC

                                                                                                const SORT_ASC: string;

                                                                                                  variable SORT_DESC

                                                                                                  const SORT_DESC: string;

                                                                                                    variable SourceContext

                                                                                                    const SourceContext: any;
                                                                                                    • Context that provides a function that accept a source and return getters for the modified source and label.

                                                                                                      This allows some special inputs to prefix or suffix the source of their children.

                                                                                                      Example 1

                                                                                                      const sourceContext = { getSource: source => coordinates.${source}, getLabel: source => resources.posts.fields.${source}, } const CoordinatesInput = () => { return ( <SourceContextProvider value={sourceContext}> ); };

                                                                                                    variable SourceContextProvider

                                                                                                    const SourceContextProvider: any;

                                                                                                      variable StoreContext

                                                                                                      const StoreContext: any;

                                                                                                        variable TranslatableContext

                                                                                                        const TranslatableContext: any;

                                                                                                          variable undoableEventEmitter

                                                                                                          const undoableEventEmitter: EventEmitter<string | symbol, any>;

                                                                                                            variable UPDATE

                                                                                                            const UPDATE: string;

                                                                                                              variable UPDATE_MANY

                                                                                                              const UPDATE_MANY: string;

                                                                                                                variable validQueryParams

                                                                                                                const validQueryParams: string[];

                                                                                                                  variable WithPermissions

                                                                                                                  const WithPermissions: ComponentType<WithPermissionsProps>;

                                                                                                                    Functions

                                                                                                                    function addRefreshAuthToAuthProvider

                                                                                                                    addRefreshAuthToAuthProvider: <
                                                                                                                    AuthProviderType extends AuthProvider = AuthProvider
                                                                                                                    >(
                                                                                                                    provider: AuthProviderType,
                                                                                                                    refreshAuth: () => Promise<void>
                                                                                                                    ) => AuthProviderType;
                                                                                                                    • A higher-order function which wraps an authProvider to handle refreshing authentication. This is useful when the authentication service supports a refresh token mechanism. The wrapped provider will call the refreshAuth function before calling the authProvider checkAuth, getIdentity and getPermissions methods.

                                                                                                                      The refreshAuth function should return a Promise that resolves when the authentication token has been refreshed. It might throw an error if the refresh failed. In this case, react-admin will handle the error as usual.

                                                                                                                      Parameter provider

                                                                                                                      An authProvider

                                                                                                                      Parameter refreshAuth

                                                                                                                      A function that refreshes the authentication token if needed and returns a Promise.

                                                                                                                      Returns

                                                                                                                      A wrapped authProvider.

                                                                                                                      Example 1

                                                                                                                      import { addRefreshAuthToAuthProvider } from 'react-admin'; import { authProvider } from './authProvider'; import { refreshAuth } from './refreshAuth';

                                                                                                                      const authProvider = addRefreshAuthToAuthProvider(authProvider, refreshAuth);

                                                                                                                    function addRefreshAuthToDataProvider

                                                                                                                    addRefreshAuthToDataProvider: <
                                                                                                                    DataProviderType extends DataProvider<string> = DataProvider<string>
                                                                                                                    >(
                                                                                                                    provider: DataProviderType,
                                                                                                                    refreshAuth: () => Promise<void>
                                                                                                                    ) => DataProviderType;
                                                                                                                    • A higher-order function which wraps a dataProvider to handle refreshing authentication. This is useful when the authentication service supports a refresh token mechanism. The wrapped provider will call the refreshAuth function before calling any dataProvider methods.

                                                                                                                      The refreshAuth function should return a Promise that resolves when the authentication token has been refreshed. It might throw an error if the refresh failed. In this case, react-admin will handle the error as usual.

                                                                                                                      Parameter provider

                                                                                                                      A dataProvider

                                                                                                                      Parameter refreshAuth

                                                                                                                      A function that refreshes the authentication token if needed and returns a Promise.

                                                                                                                      Returns

                                                                                                                      A wrapped dataProvider.

                                                                                                                      Example 1

                                                                                                                      import { addRefreshAuthToDataProvider } from 'react-admin'; import { jsonServerProvider } from 'ra-data-json-server'; import { refreshAuth } from './refreshAuth';

                                                                                                                      const dataProvider = addRefreshAuthToDataProvider(jsonServerProvider('http://localhost:3000'), refreshAuth);

                                                                                                                    function AdminRouter

                                                                                                                    AdminRouter: ({ basename, children }: AdminRouterProps) => React.JSX.Element;
                                                                                                                    • Creates a react-router Router unless the app is already inside existing router. Also creates a BasenameContext with the basename prop

                                                                                                                    function applyCallbacks

                                                                                                                    applyCallbacks: <U>({
                                                                                                                    name,
                                                                                                                    params,
                                                                                                                    dataProvider,
                                                                                                                    handlers,
                                                                                                                    resource,
                                                                                                                    }: {
                                                                                                                    name: string;
                                                                                                                    params: U;
                                                                                                                    dataProvider: DataProvider;
                                                                                                                    handlers: ResourceCallbacks[];
                                                                                                                    resource: string;
                                                                                                                    }) => Promise<U>;
                                                                                                                    • Apply callbacks to the params for the given resource and hook

                                                                                                                      Parameter dataProvider

                                                                                                                      The dataProvider

                                                                                                                      Parameter handlers

                                                                                                                      An array of ResourceCallbacks

                                                                                                                      Parameter resource

                                                                                                                      The resource name

                                                                                                                      Parameter hook

                                                                                                                      The hook name (beforeGetList, afterGetOne, etc.)

                                                                                                                      Parameter params

                                                                                                                      The params / result to pass to the callbacks

                                                                                                                      Returns

                                                                                                                      {Promise} The params / result after the callbacks have been applied

                                                                                                                    function asyncDebounce

                                                                                                                    asyncDebounce: <FunctionType extends (...args: any[]) => Promise<any>>(
                                                                                                                    func: FunctionType,
                                                                                                                    wait?: number
                                                                                                                    ) => (...args: Parameters<FunctionType>) => ReturnType<FunctionType>;
                                                                                                                    • A version of lodash/debounce that always returns a promise but wait for the debounced function to return to resolve it.

                                                                                                                      Parameter func

                                                                                                                      The function to debounce

                                                                                                                      Parameter wait

                                                                                                                      The debounce delay

                                                                                                                      Returns

                                                                                                                      A debounced function that returns a promise

                                                                                                                    function Authenticated

                                                                                                                    Authenticated: (props: AuthenticatedProps) => React.JSX.Element | null;
                                                                                                                    • Restrict access to children to authenticated users. Redirects anonymous users to the login page.

                                                                                                                      Use it to decorate your custom page components to require authentication.

                                                                                                                      By default this component is optimistic: it does not block rendering children when checking authentication, but this mode can be turned off by setting requireAuth to true.

                                                                                                                      You can set additional authParams at will if your authProvider requires it.

                                                                                                                      Example 1

                                                                                                                      import { Admin, CustomRoutes, Authenticated } from 'react-admin';

                                                                                                                      const customRoutes = [ <Route path="/foo" element={ <Authenticated authParams={{ foo: 'bar' }}> } /> ]; const App = () => ( {customRoutes} );

                                                                                                                      See Also

                                                                                                                      • useAuthState

                                                                                                                    function BasenameContextProvider

                                                                                                                    BasenameContextProvider: ({
                                                                                                                    children,
                                                                                                                    basename,
                                                                                                                    }: {
                                                                                                                    children: any;
                                                                                                                    basename: any;
                                                                                                                    }) => React.JSX.Element;
                                                                                                                    • Set the string to append to all links to the admin app.

                                                                                                                      Useful when the app is mounted on a sub path, e.g. '/admin'. Used internally by the <Admin> component.

                                                                                                                      See Also

                                                                                                                      • useBasename

                                                                                                                    function choices

                                                                                                                    choices: (
                                                                                                                    list: any,
                                                                                                                    message?: any
                                                                                                                    ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                    • Choices validator

                                                                                                                      Returns an error if the value is not among the list passed as parameter

                                                                                                                      Parameter list

                                                                                                                      Parameter message

                                                                                                                      Example 1

                                                                                                                      const genderValidators = [choices(['male', 'female'], 'Must be either Male or Female')]; <TextInput name="gender" validate={genderValidators} />

                                                                                                                    function ChoicesContextProvider

                                                                                                                    ChoicesContextProvider: ({
                                                                                                                    children,
                                                                                                                    value,
                                                                                                                    }: {
                                                                                                                    children: ReactNode;
                                                                                                                    value: ChoicesContextValue;
                                                                                                                    }) => React.JSX.Element;

                                                                                                                      function combine2Validators

                                                                                                                      combine2Validators: (validator1: Validator, validator2: Validator) => Validator;

                                                                                                                        function combineDataProviders

                                                                                                                        combineDataProviders: (dataProviderMatcher: DataProviderMatcher) => DataProvider;
                                                                                                                        • Combine multiple data providers into one.

                                                                                                                          Parameter dataProviderMatcher

                                                                                                                          A function that returns a data provider for a given resource.

                                                                                                                          Example 1

                                                                                                                          const dataProvider = combineDataProviders(resource => { switch(resource) { case 'posts': case 'comments': return dataProvider1; case 'users': return dataProvider2; default: throw new Error('Unknown resource'); } });

                                                                                                                        function composeSyncValidators

                                                                                                                        composeSyncValidators: (
                                                                                                                        ...validators: any[]
                                                                                                                        ) => (
                                                                                                                        value: any,
                                                                                                                        values: any,
                                                                                                                        meta: any
                                                                                                                        ) =>
                                                                                                                        | ValidationErrorMessage
                                                                                                                        | Promise<ValidationErrorMessage | null | undefined>
                                                                                                                        | undefined;

                                                                                                                          function composeValidators

                                                                                                                          composeValidators: (...validators: any[]) => Validator;

                                                                                                                            function convertLegacyAuthProvider

                                                                                                                            convertLegacyAuthProvider: (
                                                                                                                            legacyAuthProvider: LegacyAuthProvider
                                                                                                                            ) => AuthProvider;
                                                                                                                            • Turn a function-based authProvider to an object-based one

                                                                                                                              Allows using legacy authProviders transparently.

                                                                                                                              Parameter legacyAuthProvider

                                                                                                                              A legacy authProvider (type, params) => Promise

                                                                                                                              Returns

                                                                                                                              {Object} An authProvider that react-admin can use

                                                                                                                            function convertLegacyDataProvider

                                                                                                                            convertLegacyDataProvider: (
                                                                                                                            legacyDataProvider: LegacyDataProvider
                                                                                                                            ) => DataProvider;
                                                                                                                            • Turn a function-based dataProvider to an object-based one

                                                                                                                              Allows using legacy dataProviders transparently.

                                                                                                                              Parameter legacyDataProvider

                                                                                                                              A legacy dataProvider (type, resource, params) => Promise

                                                                                                                              Returns

                                                                                                                              {Object} A dataProvider that react-admin can use

                                                                                                                            function CoreAdmin

                                                                                                                            CoreAdmin: (props: CoreAdminProps) => React.JSX.Element;
                                                                                                                            • Main admin component, entry point to the application.

                                                                                                                              Initializes the various contexts (auth, data, i18n, router) and defines the main routes.

                                                                                                                              Expects a list of resources as children, or a function returning a list of resources based on the permissions.

                                                                                                                              Example 1

                                                                                                                              // static list of resources

                                                                                                                              import { CoreAdmin, Resource, ListGuesser, useDataProvider, } from 'ra-core';

                                                                                                                              const App = () => ( <CoreAdmin dataProvider={myDataProvider}> <Resource name="posts" list={ListGuesser} /> );

                                                                                                                              // dynamic list of resources based on permissions

                                                                                                                              import { CoreAdmin, Resource, ListGuesser, useDataProvider, } from 'ra-core';

                                                                                                                              const App = () => ( <CoreAdmin dataProvider={myDataProvider}> {permissions => [ <Resource name="posts" key="posts" list={ListGuesser} />, ]} );

                                                                                                                              // If you have to build a dynamic list of resources using a side effect, // you can't use . But as it delegates to sub components, // it's relatively straightforward to replace it:

                                                                                                                              import * as React from 'react'; import { useEffect, useState } from 'react'; import { CoreAdminContext, CoreAdminUI, Resource, ListGuesser, useDataProvider, } from 'ra-core';

                                                                                                                              const App = () => ( <CoreAdminContext dataProvider={myDataProvider}> );

                                                                                                                              const UI = () => { const [resources, setResources] = useState([]); const dataProvider = useDataProvider(); useEffect(() => { dataProvider.introspect().then(r => setResources(r)); }, []);

                                                                                                                              return ( {resources.map(resource => ( <Resource name={resource.name} key={resource.key} list={ListGuesser} /> ))} ); };

                                                                                                                            function CoreAdminContext

                                                                                                                            CoreAdminContext: (props: CoreAdminContextProps) => React.JSX.Element;

                                                                                                                              function CoreAdminRoutes

                                                                                                                              CoreAdminRoutes: (props: CoreAdminRoutesProps) => React.JSX.Element;

                                                                                                                                function CoreAdminUI

                                                                                                                                CoreAdminUI: (props: CoreAdminUIProps) => React.JSX.Element;

                                                                                                                                  function CreateBase

                                                                                                                                  CreateBase: <
                                                                                                                                  RecordType extends Omit<RaRecord<Identifier>, 'id'> = any,
                                                                                                                                  ResultRecordType extends RaRecord<Identifier> = RecordType & { id: Identifier }
                                                                                                                                  >({
                                                                                                                                  children,
                                                                                                                                  ...props
                                                                                                                                  }: CreateControllerProps<RecordType, Error, ResultRecordType> & {
                                                                                                                                  children: ReactNode;
                                                                                                                                  }) => React.JSX.Element;
                                                                                                                                  • Call useCreateController and put the value in a CreateContext

                                                                                                                                    Base class for components, without UI.

                                                                                                                                    Accepts any props accepted by useCreateController: - id: The record identifier - resource: The resource

                                                                                                                                    Example 1

                                                                                                                                    // Custom edit layout

                                                                                                                                    const PostCreate = () => ( <Grid container> <Grid item xs={8}> ... <Grid item xs={4}> Create instructions... Post related links... );

                                                                                                                                  function CreateContextProvider

                                                                                                                                  CreateContextProvider: ({
                                                                                                                                  children,
                                                                                                                                  value,
                                                                                                                                  }: {
                                                                                                                                  children: ReactNode;
                                                                                                                                  value: CreateControllerResult;
                                                                                                                                  }) => React.JSX.Element;
                                                                                                                                  • Create a Create Context.

                                                                                                                                    Example 1

                                                                                                                                    const MyCreate = (props) => { const controllerProps = useCreateController(props); return ( <CreateContextProvider value={controllerProps}> ); };

                                                                                                                                    const MyCreateView = () => { const record = useRecordContext(); // or, to rerender only when the save operation change but not data const { saving } = useCreateContext(); }

                                                                                                                                    See Also

                                                                                                                                    • CreateContext

                                                                                                                                    • RecordContext

                                                                                                                                  function CreateController

                                                                                                                                  CreateController: ({
                                                                                                                                  children,
                                                                                                                                  ...props
                                                                                                                                  }: {
                                                                                                                                  children: (params: CreateControllerResult) => ReactNode;
                                                                                                                                  } & CreateControllerProps<any, Error, any>) => ReactNode;
                                                                                                                                  • Render prop version of the useCreateController hook

                                                                                                                                    Example 1

                                                                                                                                    const CreateView = () => ... const MyCreate = props => ( <CreateController {...props}> {controllerProps => <CreateView {...controllerProps} {...props} />} );

                                                                                                                                    See Also

                                                                                                                                    • useCreateController

                                                                                                                                  function downloadCSV

                                                                                                                                  downloadCSV: (csv: string, filename?: string) => void;

                                                                                                                                    function EditBase

                                                                                                                                    EditBase: <RecordType extends RaRecord<Identifier> = any>({
                                                                                                                                    children,
                                                                                                                                    ...props
                                                                                                                                    }: { children: ReactNode } & EditControllerProps<
                                                                                                                                    RecordType,
                                                                                                                                    Error
                                                                                                                                    >) => React.JSX.Element;
                                                                                                                                    • Call useEditController and put the value in a EditContext

                                                                                                                                      Base class for components, without UI.

                                                                                                                                      Accepts any props accepted by useEditController: - id: The record identifier - resource: The resource

                                                                                                                                      Example 1

                                                                                                                                      // Custom edit layout

                                                                                                                                      const PostEdit = () => ( <Grid container> <Grid item xs={8}> ... <Grid item xs={4}> Edit instructions... Post related links... );

                                                                                                                                    function EditContextProvider

                                                                                                                                    EditContextProvider: ({
                                                                                                                                    children,
                                                                                                                                    value,
                                                                                                                                    }: {
                                                                                                                                    children: ReactNode;
                                                                                                                                    value: EditControllerResult;
                                                                                                                                    }) => React.JSX.Element;
                                                                                                                                    • Create an Edit Context.

                                                                                                                                      Example 1

                                                                                                                                      const MyEdit = (props) => { const controllerProps = useEditController(props); return ( <EditContextProvider value={controllerProps}> ); };

                                                                                                                                      const MyEditView = () => { const record = useRecordContext(); // or, to rerender only when the save operation change but not data const { saving } = useEditContext(); }

                                                                                                                                      See Also

                                                                                                                                      • EditContext

                                                                                                                                      • RecordContext

                                                                                                                                    function EditController

                                                                                                                                    EditController: ({
                                                                                                                                    children,
                                                                                                                                    ...props
                                                                                                                                    }: { children: (params: EditControllerResult) => ReactNode } & EditControllerProps<
                                                                                                                                    any,
                                                                                                                                    Error
                                                                                                                                    >) => ReactNode;
                                                                                                                                    • Render prop version of the useEditController hook

                                                                                                                                      Example 1

                                                                                                                                      const EditView = () => ... const MyEdit = props => ( <EditController {...props}> {controllerProps => <EditView {...controllerProps} {...props} />} );

                                                                                                                                      See Also

                                                                                                                                      • useEditController

                                                                                                                                    function email

                                                                                                                                    email: (
                                                                                                                                    message?: any
                                                                                                                                    ) => (value: any, values?: any) => string | { message: string; args: any };
                                                                                                                                    • Email validator

                                                                                                                                      Returns an error if the value is not a valid email

                                                                                                                                      Parameter message

                                                                                                                                      Example 1

                                                                                                                                      const emailValidators = [email('Must be an email')]; <TextInput name="email" validate={emailValidators} />

                                                                                                                                    function escapePath

                                                                                                                                    escapePath: (url: any) => any;
                                                                                                                                    • Escape special characters in path so that react-router Route does not do any special treatment

                                                                                                                                      Example 1

                                                                                                                                      escapePath('/foo(bar)') => 'foo(bar)'

                                                                                                                                      See Also

                                                                                                                                      • https://github.com/ReactTraining/react-router/blob/v3/docs/guides/RouteMatching.md#path-syntax

                                                                                                                                    function fetchRelatedRecords

                                                                                                                                    fetchRelatedRecords: (dataProvider: DataProvider) => FetchRelatedRecords;
                                                                                                                                    • Helper function for calling the dataProvider.getMany() method, and getting a Promise for the records indexed by id in return.

                                                                                                                                      Example 1

                                                                                                                                      fetchRelatedRecords(dataProvider)(records, 'post_id', 'posts').then(posts => posts.map(record => ({ ...record, post_title: posts[record.post_id].title, })) );

                                                                                                                                    function Form

                                                                                                                                    Form: <RecordType = any>(props: FormProps<RecordType>) => React.JSX.Element;
                                                                                                                                    • Creates a form element, initialized with the current record, calling the saveContext on submit

                                                                                                                                      Wrapper around react-hook-form's useForm, FormContextProvider, and . Also sets up a FormGroupContext, and handles submission validation.

                                                                                                                                      Example 1

                                                                                                                                      const MyForm = ({ record, defaultValues, validate }) => ( <Form record={record} defaultValues={defaultValues} validate={validate}> );

                                                                                                                                      {Object} Props the props you can use {Object} defaultValues {Function} validate {Function} save

                                                                                                                                      See Also

                                                                                                                                      • useForm

                                                                                                                                      • FormGroupContext

                                                                                                                                        https://react-hook-form.com/docs/useformcontext

                                                                                                                                    function FormDataConsumer

                                                                                                                                    FormDataConsumer: <TFieldValues extends FieldValues = FieldValues>(
                                                                                                                                    props: ConnectedProps<TFieldValues>
                                                                                                                                    ) => React.JSX.Element;
                                                                                                                                    • Get the current (edited) value of the record from the form and pass it to a child function

                                                                                                                                      Example 1

                                                                                                                                      const PostEdit = () => ( <SimpleForm> {({ formData }) => formData.hasEmail && } );

                                                                                                                                      Example 2

                                                                                                                                      const OrderEdit = () => ( <SelectInput source="country" choices={countries} /> <FormDataConsumer> {({ formData }) => <SelectInput source="city" choices={getCitiesFor(formData.country)} /> } );

                                                                                                                                    function FormGroupContextProvider

                                                                                                                                    FormGroupContextProvider: ({
                                                                                                                                    children,
                                                                                                                                    name,
                                                                                                                                    }: {
                                                                                                                                    children: ReactNode;
                                                                                                                                    name: string;
                                                                                                                                    }) => React.JSX.Element;
                                                                                                                                    • This provider allows its input children to register to a specific group. This enables other components in the group to access group properties such as its validation (valid/invalid) or whether its inputs have been updated (dirty/pristine).

                                                                                                                                      Parameter props

                                                                                                                                      The component props

                                                                                                                                      Parameter

                                                                                                                                      {ReactNode} props.children The form group content

                                                                                                                                      Parameter

                                                                                                                                      {String} props.name The form group name

                                                                                                                                      Example 1

                                                                                                                                      import { Edit, SimpleForm, TextInput, FormGroupContextProvider, useFormGroup } from 'react-admin'; import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';

                                                                                                                                      const PostEdit = () => ( <AccordionSummary expandIcon={} aria-controls="options-content" id="options-header" > Options <TextInput source="teaser" validate={minLength(20)} /> );

                                                                                                                                      const AccordionSectionTitle = ({ children, name }) => { const formGroupState = useFormGroup(name); return ( <Typography color={formGroupState.invalid && formGroupState.dirty ? 'error' : 'inherit'}> {children} ); }

                                                                                                                                    function FormGroupsProvider

                                                                                                                                    FormGroupsProvider: ({ children }: { children: ReactNode }) => React.JSX.Element;
                                                                                                                                    • This component provides functions through context to manage form groups, allowing to link or unlink an input to a group.

                                                                                                                                      See Also

                                                                                                                                      • FormGroupContextProvider

                                                                                                                                      • useFormGroup

                                                                                                                                      • useFormGroups

                                                                                                                                    function getElementsFromRecords

                                                                                                                                    getElementsFromRecords: (
                                                                                                                                    records: any[],
                                                                                                                                    types: InferredTypeMap
                                                                                                                                    ) => InferredElement[];
                                                                                                                                    • Get a list of React-admin field components from a list of records

                                                                                                                                      Example 1

                                                                                                                                      const records = [ { "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123, }, { "id": 2, "title": "Sic Dolor amet", "user_id": 456, }, ]; const types = { id: NumberField, string: TextField, number: NumberField, reference: ReferenceField }; const components = getElementsFromRecords(records, types); // [ // , // , // , // , // ];

                                                                                                                                    function getFieldLabelTranslationArgs

                                                                                                                                    getFieldLabelTranslationArgs: (options?: Args) => TranslationArguments;
                                                                                                                                    • Returns an array of arguments to use with the translate function for the label of a field. The label will be computed from the resource and source props.

                                                                                                                                      Usage: {translate(...getFieldLabelTranslationArgs({ label, resource, source }))}

                                                                                                                                      See Also

                                                                                                                                      • useTranslateLabel for a ready-to-use hook

                                                                                                                                    function getFormGroupState

                                                                                                                                    getFormGroupState: (fieldStates: FieldState[]) => FormGroupState;
                                                                                                                                    • Get the state of a form group

                                                                                                                                      Parameter fieldStates

                                                                                                                                      A map of field states from react-hook-form where the key is the field name.

                                                                                                                                      Returns

                                                                                                                                      {FormGroupState} The state of the group.

                                                                                                                                    function getListControllerProps

                                                                                                                                    getListControllerProps: (props: any) => {};
                                                                                                                                    • Select the props injected by the useListController hook to be passed to the List children need This is an implementation of pick()

                                                                                                                                    function getMutationMode

                                                                                                                                    getMutationMode: (mutationMode: any, undoable: any) => any;

                                                                                                                                      function getNumberOrDefault

                                                                                                                                      getNumberOrDefault: (
                                                                                                                                      possibleNumber: string | number | undefined,
                                                                                                                                      defaultValue: number
                                                                                                                                      ) => number;

                                                                                                                                        function getQuery

                                                                                                                                        getQuery: ({
                                                                                                                                        queryFromLocation,
                                                                                                                                        params,
                                                                                                                                        filterDefaultValues,
                                                                                                                                        sort,
                                                                                                                                        perPage,
                                                                                                                                        }: {
                                                                                                                                        queryFromLocation: any;
                                                                                                                                        params: any;
                                                                                                                                        filterDefaultValues: any;
                                                                                                                                        sort: any;
                                                                                                                                        perPage: any;
                                                                                                                                        }) => ListParams;
                                                                                                                                        • Merge list params from 3 different sources: - the query string - the params stored in the state (from previous navigation) - the props passed to the List component (including the filter defaultValues)

                                                                                                                                        function getRecordForLocale

                                                                                                                                        getRecordForLocale: (record: {} | undefined, locale: string) => {} | undefined;
                                                                                                                                        • Returns a record where translatable fields have their values set to the value of the given locale. This is necessary because the fields rely on the RecordContext to get their values and have no knowledge of the locale.

                                                                                                                                          Given the record { title: { en: 'title_en', fr: 'title_fr' } } and the locale 'fr', the record for the locale 'fr' will be { title: 'title_fr' }

                                                                                                                                        function getRecordFromLocation

                                                                                                                                        getRecordFromLocation: ({ state, search }: Location) => any;
                                                                                                                                        • Get the initial record from the location, whether it comes from the location state or is serialized in the url search part.

                                                                                                                                        function getResourceFieldLabelKey

                                                                                                                                        getResourceFieldLabelKey: (resource: string, source: string) => string;

                                                                                                                                          function getSelectedReferencesStatus

                                                                                                                                          getSelectedReferencesStatus: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                          field: Pick<ControllerRenderProps, 'value'>,
                                                                                                                                          referenceRecords: RecordType[]
                                                                                                                                          ) =>
                                                                                                                                          | 'REFERENCES_STATUS_READY'
                                                                                                                                          | 'REFERENCES_STATUS_INCOMPLETE'
                                                                                                                                          | 'REFERENCES_STATUS_EMPTY';

                                                                                                                                            function getSimpleValidationResolver

                                                                                                                                            getSimpleValidationResolver: (
                                                                                                                                            validate: ValidateForm
                                                                                                                                            ) => (
                                                                                                                                            data: FieldValues
                                                                                                                                            ) => Promise<{ values: FieldValues; errors: {} } | { values: {}; errors: any }>;
                                                                                                                                            • Convert a simple validation function that returns an object matching the form shape with errors to a validation resolver compatible with react-hook-form.

                                                                                                                                              Example 1

                                                                                                                                              const validate = (values: any) => { if (values.username == null || values.username.trim() === '') { return { username: 'Required' }; } }

                                                                                                                                              const validationResolver = getSimpleValidationResolver(validate);

                                                                                                                                              const UserForm = () => ( <Form defaultValues={{ username: 'John' }} validationResolver={validationResolver} > );

                                                                                                                                            function getStatusForArrayInput

                                                                                                                                            getStatusForArrayInput: <RecordType extends RaRecord<Identifier> = any>({
                                                                                                                                            field,
                                                                                                                                            matchingReferences,
                                                                                                                                            referenceRecords,
                                                                                                                                            translate,
                                                                                                                                            }: GetStatusForArrayInputParams<RecordType>) => {
                                                                                                                                            waiting: boolean;
                                                                                                                                            error: string | null;
                                                                                                                                            warning: string | null;
                                                                                                                                            choices: RecordType[];
                                                                                                                                            };

                                                                                                                                              function getStatusForInput

                                                                                                                                              getStatusForInput: <
                                                                                                                                              RecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                              >({
                                                                                                                                              field,
                                                                                                                                              matchingReferences,
                                                                                                                                              referenceRecord,
                                                                                                                                              translate,
                                                                                                                                              }: GetStatusForInputParams<RecordType>) => {
                                                                                                                                              waiting: any;
                                                                                                                                              error: string | null;
                                                                                                                                              warning: string | null;
                                                                                                                                              choices: RecordType[];
                                                                                                                                              };

                                                                                                                                                function getStorage

                                                                                                                                                getStorage: () => LocalStorageShim | Storage;

                                                                                                                                                  function getSuggestionsFactory

                                                                                                                                                  getSuggestionsFactory: ({
                                                                                                                                                  allowCreate,
                                                                                                                                                  choices,
                                                                                                                                                  createText,
                                                                                                                                                  createValue,
                                                                                                                                                  optionText,
                                                                                                                                                  optionValue,
                                                                                                                                                  getChoiceText,
                                                                                                                                                  getChoiceValue,
                                                                                                                                                  limitChoicesToValue,
                                                                                                                                                  matchSuggestion,
                                                                                                                                                  selectedItem,
                                                                                                                                                  suggestionLimit,
                                                                                                                                                  }: UseSuggestionsOptions & {
                                                                                                                                                  getChoiceText: (choice: any) => string | ReactElement;
                                                                                                                                                  getChoiceValue: (choice: any) => string;
                                                                                                                                                  }) => (filter: any) => any[];
                                                                                                                                                  • Get the suggestions to display after applying a fuzzy search on the available choices

                                                                                                                                                    Example 1

                                                                                                                                                    getSuggestions({ choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }], optionText: 'name', optionValue: 'id', getSuggestionText: choice => choice[optionText], })('pub')

                                                                                                                                                    // Will return [{ id: 2, name: 'publisher' }] getSuggestions({ choices: [{ id: 1, name: 'admin' }, { id: 2, name: 'publisher' }], optionText: 'name', optionValue: 'id', getSuggestionText: choice => choice[optionText], })('pub')

                                                                                                                                                    // Will return [{ id: 2, name: 'publisher' }]

                                                                                                                                                  function getValuesFromRecords

                                                                                                                                                  getValuesFromRecords: (records: any[]) => any;
                                                                                                                                                  • Gets a list of values indexed by field based on a list of records

                                                                                                                                                    Example 1

                                                                                                                                                    const records = [ { id: 1, title: "Lorem Ipsum", views: 254, user_id: 123, }, { id: 2, title: "Sic Dolor amet", views: 65, user_id: 456, }, ]; getValuesFromRecords(records); // { // id: [1, 2], // title: ['Lorem Ipsum', 'Sic Dolor amet'], // views: [254, 65], // user_id: [123, 456], // }

                                                                                                                                                  function hasCustomParams

                                                                                                                                                  hasCustomParams: (params: ListParams) => any;
                                                                                                                                                  • Check if user has already set custom sort, page, or filters for this list

                                                                                                                                                    User params come from the store as the params props. By default, this object is:

                                                                                                                                                    { filter: {}, order: null, page: 1, perPage: null, sort: null }

                                                                                                                                                    To check if the user has custom params, we must compare the params to these initial values.

                                                                                                                                                    Parameter params

                                                                                                                                                  function I18nContextProvider

                                                                                                                                                  I18nContextProvider: ({
                                                                                                                                                  value,
                                                                                                                                                  children,
                                                                                                                                                  }: I18nContextProviderProps) => React.JSX.Element | null;
                                                                                                                                                  • Store the i18nProvider in a context, and rerender children when the locale changes

                                                                                                                                                  function inferTypeFromValues

                                                                                                                                                  inferTypeFromValues: (name: any, values?: never[]) => InferredElementDescription;
                                                                                                                                                  • Guesses an element type based on an array of values

                                                                                                                                                    Parameter name

                                                                                                                                                    Property name, e.g. 'date_of_birth'

                                                                                                                                                    Parameter values

                                                                                                                                                    an array of values from which to determine the type, e.g. [12, 34.4, 43]

                                                                                                                                                    Example 1

                                                                                                                                                    inferElementFromValues( 'address', ['2 Baker Street', '1 Downing street'], ); // { type: 'string', props: { source: 'address' } }

                                                                                                                                                  function InfiniteListBase

                                                                                                                                                  InfiniteListBase: <RecordType extends RaRecord<Identifier> = any>({
                                                                                                                                                  children,
                                                                                                                                                  ...props
                                                                                                                                                  }: InfiniteListControllerProps<RecordType> & {
                                                                                                                                                  children: ReactNode;
                                                                                                                                                  }) => React.JSX.Element;
                                                                                                                                                  • Call useInfiniteListController and put the value in a ListContext

                                                                                                                                                    Base class for components, without UI.

                                                                                                                                                    Accepts any props accepted by useInfiniteListController: - filter: permanent filter applied to the list - filters: Filter element, to display the filters - filterDefaultValues: object; - perPage: Number of results per page - sort: Default sort - exporter: exported function

                                                                                                                                                    Example 1

                                                                                                                                                    // Custom list layout

                                                                                                                                                    const PostList = () => ( <InfiniteListBase perPage={10}> List metrics... <Grid container> <Grid item xs={8}> <SimpleList primaryText={record => record.title} /> <Grid item xs={4}> List instructions... Post related links... );

                                                                                                                                                  function isEmpty

                                                                                                                                                  isEmpty: (value: any) => boolean;

                                                                                                                                                    function isRequired

                                                                                                                                                    isRequired: (validate: any) => boolean;
                                                                                                                                                    • Given a validator, returns a boolean indicating whether the field is required or not.

                                                                                                                                                    function ListBase

                                                                                                                                                    ListBase: <RecordType extends RaRecord<Identifier> = any>({
                                                                                                                                                    children,
                                                                                                                                                    ...props
                                                                                                                                                    }: ListControllerProps<RecordType> & { children: ReactNode }) => React.JSX.Element;
                                                                                                                                                    • Call useListController and put the value in a ListContext

                                                                                                                                                      Base class for components, without UI.

                                                                                                                                                      Accepts any props accepted by useListController: - filter: permanent filter applied to the list - filters: Filter element, to display the filters - filterDefaultValues: object; - perPage: Number of results per page - sort: Default sort - exporter: exported function

                                                                                                                                                      Example 1

                                                                                                                                                      // Custom list layout

                                                                                                                                                      const PostList = () => ( <ListBase perPage={10}> List metrics... <Grid container> <Grid item xs={8}> <SimpleList primaryText={record => record.title} /> <Grid item xs={4}> List instructions... Post related links... );

                                                                                                                                                    function ListContextProvider

                                                                                                                                                    ListContextProvider: ({
                                                                                                                                                    value,
                                                                                                                                                    children,
                                                                                                                                                    }: {
                                                                                                                                                    value: ListControllerResult;
                                                                                                                                                    children: React.ReactNode;
                                                                                                                                                    }) => React.JSX.Element;
                                                                                                                                                    • Create a List Context and several thematic List subcontext.

                                                                                                                                                      Allows children to subscribe to part of the ListContext, and bail out of rendering when some parts of the context that they don't depend on change (because unfortunately React doesn't allow to use context selectors yet).

                                                                                                                                                      Example 1

                                                                                                                                                      const MyList = (props) => { const controllerProps = useListController(props); return ( <ListContextProvider value={controllerProps}> ); };

                                                                                                                                                      const MyListView = () => { const { data, filterValues, setFilters } = useListContext(); // or, to rerender only when filters change but not data const { filterValues, setFilters } = useListFilterContext(); }

                                                                                                                                                      See Also

                                                                                                                                                      • ListContext

                                                                                                                                                      • ListFilterContext

                                                                                                                                                    function ListController

                                                                                                                                                    ListController: ({
                                                                                                                                                    children,
                                                                                                                                                    ...props
                                                                                                                                                    }: {
                                                                                                                                                    children: (params: ListControllerResult) => JSX.Element;
                                                                                                                                                    } & ListControllerProps<any>) => JSX.Element;
                                                                                                                                                    • Render prop version of the useListController hook.

                                                                                                                                                      Example 1

                                                                                                                                                      const ListView = () => ...; const List = props => ( <ListController {...props}> {controllerProps => <ListView {...controllerProps} {...props} />} )

                                                                                                                                                      See Also

                                                                                                                                                      • useListController

                                                                                                                                                    function localStorageStore

                                                                                                                                                    localStorageStore: (version?: string, appKey?: string) => Store;
                                                                                                                                                    • Store using localStorage, or memory storage in incognito mode

                                                                                                                                                      Example 1

                                                                                                                                                      import { localStorageStore } from 'react-admin';

                                                                                                                                                      const App = () => ( <Admin store={localStorageStore()}> ... );

                                                                                                                                                    function LogoutOnMount

                                                                                                                                                    LogoutOnMount: () => null;
                                                                                                                                                    • Log the user out and redirect them to login.

                                                                                                                                                      To be used as a catch-all route for anonymous users in a secure app.

                                                                                                                                                      See Also

                                                                                                                                                      • CoreAdminRoutes

                                                                                                                                                    function maxLength

                                                                                                                                                    maxLength: (
                                                                                                                                                    max: any,
                                                                                                                                                    message?: any
                                                                                                                                                    ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                                                    • Maximum length validator

                                                                                                                                                      Returns an error if the value has a length higher than the parameter

                                                                                                                                                      Parameter max

                                                                                                                                                      Parameter message

                                                                                                                                                      Example 1

                                                                                                                                                      const nameValidators = [maxLength(10, 'Should be at most 10 characters')]; <TextInput name="name" validate={nameValidators} />

                                                                                                                                                    function maxValue

                                                                                                                                                    maxValue: (
                                                                                                                                                    max: any,
                                                                                                                                                    message?: any
                                                                                                                                                    ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                                                    • Maximum validator

                                                                                                                                                      Returns an error if the value is higher than the parameter

                                                                                                                                                      Parameter max

                                                                                                                                                      Parameter message

                                                                                                                                                      Example 1

                                                                                                                                                      const fooValidators = [maxValue(10, 'Should be less than 10')]; <NumberInput name="foo" validate={fooValidators} />

                                                                                                                                                    function memoryStore

                                                                                                                                                    memoryStore: (storage?: any) => Store;
                                                                                                                                                    • Store using memory

                                                                                                                                                      Example 1

                                                                                                                                                      import { memoryStore } from 'react-admin';

                                                                                                                                                      const App = () => ( <Admin store={memoryStore()}> ... );

                                                                                                                                                    function mergeRefs

                                                                                                                                                    mergeRefs: <T = any>(
                                                                                                                                                    refs: Array<MutableRefObject<T> | LegacyRef<T>>
                                                                                                                                                    ) => RefCallback<T>;

                                                                                                                                                      function mergeTranslations

                                                                                                                                                      mergeTranslations: (...translationsModules: object[]) => any;
                                                                                                                                                      • Compose translations from multiple packages for a single language (eg: 'english').

                                                                                                                                                        Use it to merge translations from addons with the main react-admin translations.

                                                                                                                                                        Example 1

                                                                                                                                                        import * as React from "react"; import { Admin, Resource, mergeTranslations } from 'react-admin'; import polyglotI18nProvider from 'ra-i18n-polyglot'; import englishMessages from 'ra-language-english'; import englishTreeMessages from 'ra-tree-language-english';

                                                                                                                                                        const messages = { en: mergeTranslations(englishMessages, englishTreeMessages), }; const i18nProvider = polyglotI18nProvider( locale => messages[locale] ? messages[locale] : messages.en );

                                                                                                                                                        const App = () => ( <Admin i18nProvider={i18nProvider}> ... );

                                                                                                                                                      function minLength

                                                                                                                                                      minLength: (
                                                                                                                                                      min: any,
                                                                                                                                                      message?: any
                                                                                                                                                      ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                                                      • Minimum length validator

                                                                                                                                                        Returns an error if the value has a length less than the parameter

                                                                                                                                                        Parameter min

                                                                                                                                                        Parameter message

                                                                                                                                                        Example 1

                                                                                                                                                        const passwordValidators = [minLength(10, 'Should be at least 10 characters')]; <TextInput type="password" name="password" validate={passwordValidators} />

                                                                                                                                                      function minValue

                                                                                                                                                      minValue: (
                                                                                                                                                      min: any,
                                                                                                                                                      message?: any
                                                                                                                                                      ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                                                      • Minimum validator

                                                                                                                                                        Returns an error if the value is less than the parameter

                                                                                                                                                        Parameter min

                                                                                                                                                        Parameter message

                                                                                                                                                        Example 1

                                                                                                                                                        const fooValidators = [minValue(5, 'Should be more than 5')]; <NumberInput name="foo" validate={fooValidators} />

                                                                                                                                                      function NotificationContextProvider

                                                                                                                                                      NotificationContextProvider: ({
                                                                                                                                                      children,
                                                                                                                                                      }: {
                                                                                                                                                      children: any;
                                                                                                                                                      }) => React.JSX.Element;

                                                                                                                                                        function number

                                                                                                                                                        number: (
                                                                                                                                                        message?: any
                                                                                                                                                        ) => (value: any, values: any) => string | { message: string; args: any };
                                                                                                                                                        • Number validator

                                                                                                                                                          Returns an error if the value is not a number

                                                                                                                                                          Parameter message

                                                                                                                                                          Example 1

                                                                                                                                                          const ageValidators = [number('Must be a number')]; <TextInput name="age" validate={ageValidators} />

                                                                                                                                                        function OptionalRecordContextProvider

                                                                                                                                                        OptionalRecordContextProvider: <
                                                                                                                                                        RecordType extends
                                                                                                                                                        | RaRecord<Identifier>
                                                                                                                                                        | Omit<RaRecord<Identifier>, 'id'> = RaRecord<Identifier>
                                                                                                                                                        >({
                                                                                                                                                        value,
                                                                                                                                                        children,
                                                                                                                                                        }: {
                                                                                                                                                        children: ReactElement;
                                                                                                                                                        value?: RecordType;
                                                                                                                                                        }) => React.JSX.Element;
                                                                                                                                                        • Wrap children with a RecordContext provider only if the value is defined.

                                                                                                                                                          Allows a component to work outside of a record context.

                                                                                                                                                          Example 1

                                                                                                                                                          import { OptionalRecordContextProvider, TextField } from 'react-admin';

                                                                                                                                                          const RecordTitle = ({ record }) => ( <OptionalRecordContextProvider value={record}> );

                                                                                                                                                        function OptionalResourceContextProvider

                                                                                                                                                        OptionalResourceContextProvider: ({
                                                                                                                                                        value,
                                                                                                                                                        children,
                                                                                                                                                        }: {
                                                                                                                                                        value?: ResourceContextValue;
                                                                                                                                                        children: ReactElement;
                                                                                                                                                        }) => React.JSX.Element;
                                                                                                                                                        • Wrap children with a ResourceContext provider only if the value is defined.

                                                                                                                                                          Allows a component to work outside of a resource context.

                                                                                                                                                          Example 1

                                                                                                                                                          import { OptionalResourceContextProvider, EditButton } from 'react-admin';

                                                                                                                                                          const Button = ({ resource }) => ( <OptionalResourceContextProvider value={resource}> );

                                                                                                                                                        function parseQueryFromLocation

                                                                                                                                                        parseQueryFromLocation: ({ search }: { search: any }) => Partial<ListParams>;

                                                                                                                                                          function PreferenceKeyContextProvider

                                                                                                                                                          PreferenceKeyContextProvider: ({
                                                                                                                                                          value,
                                                                                                                                                          children,
                                                                                                                                                          }: {
                                                                                                                                                          value?: string | null | undefined;
                                                                                                                                                          children: React.ReactNode;
                                                                                                                                                          }) => React.JSX.Element;

                                                                                                                                                            function PreferencesEditorContextProvider

                                                                                                                                                            PreferencesEditorContextProvider: ({
                                                                                                                                                            children,
                                                                                                                                                            }: {
                                                                                                                                                            children: any;
                                                                                                                                                            }) => React.JSX.Element;

                                                                                                                                                              function Ready

                                                                                                                                                              Ready: () => React.JSX.Element;

                                                                                                                                                                function RecordContextProvider

                                                                                                                                                                RecordContextProvider: <
                                                                                                                                                                RecordType extends
                                                                                                                                                                | RaRecord<Identifier>
                                                                                                                                                                | Omit<RaRecord<Identifier>, 'id'> = RaRecord<Identifier>
                                                                                                                                                                >({
                                                                                                                                                                children,
                                                                                                                                                                value,
                                                                                                                                                                }: RecordContextProviderProps<RecordType>) => React.JSX.Element;
                                                                                                                                                                • Provider for the Record Context, to store a record.

                                                                                                                                                                  Use the useRecordContext() hook to read the context. That's what the Edit and Show components do in react-admin.

                                                                                                                                                                  Many react-admin components read the RecordContext, including all Field components.

                                                                                                                                                                  Example 1

                                                                                                                                                                  import { useGetOne, RecordContextProvider } from 'ra-core';

                                                                                                                                                                  const Show = ({ resource, id }) => { const { data } = useGetOne(resource, { id }); return ( <RecordContextProvider value={data}> ... ); };

                                                                                                                                                                function RecordRepresentation

                                                                                                                                                                RecordRepresentation: (props: {
                                                                                                                                                                record?: RaRecord<import('../../types').Identifier> | undefined;
                                                                                                                                                                resource?: string | undefined;
                                                                                                                                                                }) => React.JSX.Element;
                                                                                                                                                                • Render the record representation as specified on its parent .

                                                                                                                                                                  Parameter props

                                                                                                                                                                  The component props

                                                                                                                                                                  Parameter

                                                                                                                                                                  {string} props.resource The resource name

                                                                                                                                                                  Parameter

                                                                                                                                                                  {RaRecord} props.record The record to render

                                                                                                                                                                function ReferenceFieldBase

                                                                                                                                                                ReferenceFieldBase: <
                                                                                                                                                                ReferenceRecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                >(
                                                                                                                                                                props: ReferenceFieldBaseProps<ReferenceRecordType>
                                                                                                                                                                ) => React.JSX.Element;
                                                                                                                                                                • Fetch reference record, and render its representation, or delegate rendering to child component.

                                                                                                                                                                  The reference prop should be the name of one of the components added as child.

                                                                                                                                                                  Example 1

                                                                                                                                                                  // using recordRepresentation

                                                                                                                                                                  Example 2

                                                                                                                                                                  // using a Field component to represent the record

                                                                                                                                                                  Example 3

                                                                                                                                                                  // By default, includes a link to the page of the related record // (/users/:userId in the previous example). // Set the link prop to "show" to link to the page instead.

                                                                                                                                                                  Example 4

                                                                                                                                                                  // You can also prevent <ReferenceFieldBase> from adding link to children // by setting link to false. <ReferenceFieldBase label="User" source="userId" reference="users" link={false} />

                                                                                                                                                                  Example 5

                                                                                                                                                                  // Alternatively, you can also pass a custom function to link. // It must take reference and record as arguments and return a string <ReferenceFieldBase label="User" source="userId" reference="users" link={(record, reference) => "/path/to/${reference}/${record}"} />

                                                                                                                                                                  In previous versions of React-Admin, the prop linkType was used. It is now deprecated and replaced with link. However backward-compatibility is still kept

                                                                                                                                                                function ReferenceInputBase

                                                                                                                                                                ReferenceInputBase: (props: ReferenceInputBaseProps) => React.JSX.Element;
                                                                                                                                                                • An Input component for choosing a reference record. Useful for foreign keys.

                                                                                                                                                                  This component fetches the possible values in the reference resource (using dataProvider.getList()), and renders the child you passed to which it passes the possible choices via a ChoicesContext.

                                                                                                                                                                  You must pass a child selection component to customize the way the reference selector is displayed (e.g. using <SelectInput> or <RadioButtonGroupInput> instead of <AutocompleteInput> ).

                                                                                                                                                                  Note that the child component should handle the error and loading cases as this base component does not.

                                                                                                                                                                  Example 1

                                                                                                                                                                  // using a SelectInput as selector export const CommentEdit = () => ( );

                                                                                                                                                                  By default, restricts the possible values to 25. You can extend this limit by setting the perPage prop.

                                                                                                                                                                  Example 2

                                                                                                                                                                  <ReferenceInputBase source="post_id" reference="posts" perPage={100}/>

                                                                                                                                                                  By default, orders the possible values by id desc. You can change this order by setting the sort prop (an object with field and order properties).

                                                                                                                                                                  Example 3

                                                                                                                                                                  <ReferenceInputBase source="post_id" reference="posts" sort={{ field: 'title', order: 'ASC' }} >

                                                                                                                                                                  Also, you can filter the query used to populate the possible values. Use the filter prop for that.

                                                                                                                                                                  Example 4

                                                                                                                                                                  <ReferenceInputBase source="post_id" reference="posts" filter={{ is_published: true }} >

                                                                                                                                                                  The enclosed component may filter results. ReferenceInputBase create a ChoicesContext which provides a setFilters function. You can call this function to filter the results.

                                                                                                                                                                function removeDoubleSlashes

                                                                                                                                                                removeDoubleSlashes: (path: string) => string;

                                                                                                                                                                  function removeEmpty

                                                                                                                                                                  removeEmpty: (object: any) => {};

                                                                                                                                                                    function removeKey

                                                                                                                                                                    removeKey: (target: any, path: any) => any;

                                                                                                                                                                      function required

                                                                                                                                                                      required: (
                                                                                                                                                                      message?: any
                                                                                                                                                                      ) => ((value: any, values: any) => string | { message: string; args: any }) & {
                                                                                                                                                                      isRequired: boolean;
                                                                                                                                                                      };
                                                                                                                                                                      • Required validator

                                                                                                                                                                        Returns an error if the value is null, undefined, or empty

                                                                                                                                                                        Parameter message

                                                                                                                                                                        Example 1

                                                                                                                                                                        const titleValidators = [required('The title is required')]; <TextInput name="title" validate={titleValidators} />

                                                                                                                                                                      function resolveBrowserLocale

                                                                                                                                                                      resolveBrowserLocale: (
                                                                                                                                                                      defaultLocale?: string,
                                                                                                                                                                      options?: { fullLocale?: boolean }
                                                                                                                                                                      ) => string;
                                                                                                                                                                      • Resolve the browser locale according to the value of the global window.navigator

                                                                                                                                                                        Use it to determine the locale at runtime.

                                                                                                                                                                        Parameter defaultLocale

                                                                                                                                                                        Defaults to 'en'

                                                                                                                                                                        Parameter options

                                                                                                                                                                        Parameter

                                                                                                                                                                        {boolean} options.fullLocale Defaults to false

                                                                                                                                                                        Example 1

                                                                                                                                                                        import * as React from "react"; import { Admin, Resource, resolveBrowserLocale } from 'react-admin'; import polyglotI18nProvider from 'ra-i18n-polyglot'; import englishMessages from 'ra-language-english'; import frenchMessages from 'ra-language-french';

                                                                                                                                                                        const messages = { fr: frenchMessages, en: englishMessages, }; const i18nProvider = polyglotI18nProvider( locale => messages[locale] ? messages[locale] : messages.en, resolveBrowserLocale() );

                                                                                                                                                                        const App = () => ( <Admin i18nProvider={i18nProvider}> ... );

                                                                                                                                                                      function ResourceContextProvider

                                                                                                                                                                      ResourceContextProvider: ({
                                                                                                                                                                      children,
                                                                                                                                                                      value,
                                                                                                                                                                      }: {
                                                                                                                                                                      children: ReactNode;
                                                                                                                                                                      value?: ResourceContextValue;
                                                                                                                                                                      }) =>
                                                                                                                                                                      | string
                                                                                                                                                                      | number
                                                                                                                                                                      | boolean
                                                                                                                                                                      | Iterable<React.ReactNode>
                                                                                                                                                                      | React.JSX.Element
                                                                                                                                                                      | null
                                                                                                                                                                      | undefined;
                                                                                                                                                                      • Create a Resource Context with the resource name

                                                                                                                                                                        Some react-admin components rely on the resource name to be available in the context. This component provides it.

                                                                                                                                                                        If the value is empty, the context is not provided.

                                                                                                                                                                        Parameter value

                                                                                                                                                                        the resource name

                                                                                                                                                                        Example 1

                                                                                                                                                                        import { ResourceContextProvider } from 'react-admin';

                                                                                                                                                                        const MyComponent = () => ( );

                                                                                                                                                                      function ResourceDefinitionContextProvider

                                                                                                                                                                      ResourceDefinitionContextProvider: ({
                                                                                                                                                                      definitions: defaultDefinitions,
                                                                                                                                                                      children,
                                                                                                                                                                      }: {
                                                                                                                                                                      definitions?: ResourceDefinitions<any> | undefined;
                                                                                                                                                                      children: AdminChildren;
                                                                                                                                                                      }) => React.JSX.Element;
                                                                                                                                                                      • Context to store the current resource Definition.

                                                                                                                                                                        Use the useResourceDefinition() hook to read the context.

                                                                                                                                                                        Example 1

                                                                                                                                                                        import { useResourceDefinition, useTranslate } from 'ra-core';

                                                                                                                                                                        const PostMenuItem = () => { const { name, icon } = useResourceDefinition({ resource: 'posts' });

                                                                                                                                                                        return ( {icon} {name} ); };

                                                                                                                                                                      function RestoreScrollPosition

                                                                                                                                                                      RestoreScrollPosition: ({
                                                                                                                                                                      children,
                                                                                                                                                                      storeKey,
                                                                                                                                                                      debounce,
                                                                                                                                                                      }: {
                                                                                                                                                                      storeKey: string;
                                                                                                                                                                      debounce?: number | undefined;
                                                                                                                                                                      children: ReactNode;
                                                                                                                                                                      }) => ReactNode;
                                                                                                                                                                      • A component that tracks the scroll position and restores it when the component mounts.

                                                                                                                                                                        Parameter children

                                                                                                                                                                        The content to render

                                                                                                                                                                        Parameter key

                                                                                                                                                                        The key under which to store the scroll position in the store

                                                                                                                                                                        Parameter debounceMs

                                                                                                                                                                        The debounce time in milliseconds

                                                                                                                                                                        Example 1

                                                                                                                                                                        import { RestoreScrollPosition } from 'ra-core';

                                                                                                                                                                        const MyCustomPage = () => { My Custom Page };

                                                                                                                                                                      function sanitizeFetchType

                                                                                                                                                                      sanitizeFetchType: (fetchType: string) => string;

                                                                                                                                                                        function sanitizeListRestProps

                                                                                                                                                                        sanitizeListRestProps: (props: any) => {};
                                                                                                                                                                        • Select the props not injected by the useListController hook to be used inside the List children to sanitize props injected by List This is an implementation of omit()

                                                                                                                                                                        function SaveContextProvider

                                                                                                                                                                        SaveContextProvider: ({
                                                                                                                                                                        children,
                                                                                                                                                                        value,
                                                                                                                                                                        }: {
                                                                                                                                                                        children: any;
                                                                                                                                                                        value: any;
                                                                                                                                                                        }) => React.JSX.Element;

                                                                                                                                                                          function setSubmissionErrors

                                                                                                                                                                          setSubmissionErrors: (
                                                                                                                                                                          errors: FieldValues,
                                                                                                                                                                          setError: UseFormSetError<FieldValues>
                                                                                                                                                                          ) => void;
                                                                                                                                                                          • This internal function is used to convert an object matching the form shape with errors to a format compatible with react-hook-form. It's used to handle submission errors. Only useful when you are implementing a custom form without leveraging our Form component.

                                                                                                                                                                            Example 1

                                                                                                                                                                            const MyForm = () => { const { register, handleSubmit, setError } = useForm(); const onSubmit = data => { return saveAsync(data).catch(error => setSubmissionErrors(error.body.details)); };

                                                                                                                                                                            return ( <form onSubmit={handleSubmit(onSubmit)}> ... ); };

                                                                                                                                                                          function shallowEqual

                                                                                                                                                                          shallowEqual: (objA: any, objB: any) => boolean;

                                                                                                                                                                            function ShowBase

                                                                                                                                                                            ShowBase: <RecordType extends RaRecord<Identifier> = any>({
                                                                                                                                                                            children,
                                                                                                                                                                            ...props
                                                                                                                                                                            }: {
                                                                                                                                                                            children: ReactElement;
                                                                                                                                                                            } & ShowControllerProps<RecordType>) => React.JSX.Element;
                                                                                                                                                                            • Call useShowController and put the value in a ShowContext

                                                                                                                                                                              Base class for components, without UI.

                                                                                                                                                                              Accepts any props accepted by useShowController: - id: The record identifier - resource: The resource

                                                                                                                                                                              Example 1

                                                                                                                                                                              // Custom show layout

                                                                                                                                                                              const PostShow = () => ( <Grid container> <Grid item xs={8}> ... <Grid item xs={4}> Show instructions... Post related links... );

                                                                                                                                                                            function ShowContextProvider

                                                                                                                                                                            ShowContextProvider: ({
                                                                                                                                                                            children,
                                                                                                                                                                            value,
                                                                                                                                                                            }: {
                                                                                                                                                                            children: ReactNode;
                                                                                                                                                                            value: ShowControllerResult;
                                                                                                                                                                            }) => React.JSX.Element;
                                                                                                                                                                            • Create a Show Context.

                                                                                                                                                                              Example 1

                                                                                                                                                                              const MyShow = (props) => { const controllerProps = useShowController(props); return ( <ShowContextProvider value={controllerProps}> ); };

                                                                                                                                                                              const MyShowView = () => { const record = useRecordContext(); }

                                                                                                                                                                              See Also

                                                                                                                                                                              • ShowContext

                                                                                                                                                                              • RecordContext

                                                                                                                                                                            function ShowController

                                                                                                                                                                            ShowController: ({
                                                                                                                                                                            children,
                                                                                                                                                                            ...props
                                                                                                                                                                            }: {
                                                                                                                                                                            children: (params: ShowControllerResult) => JSX.Element;
                                                                                                                                                                            } & ShowControllerProps<any>) => JSX.Element;
                                                                                                                                                                            • Render prop version of the useShowController hook

                                                                                                                                                                              Example 1

                                                                                                                                                                              const ShowView = () => ... const MyShow = () => ( {controllerProps => <ShowView {...controllerProps} {...props} />} );

                                                                                                                                                                              See Also

                                                                                                                                                                              • useShowController

                                                                                                                                                                            function StoreContextProvider

                                                                                                                                                                            StoreContextProvider: ({
                                                                                                                                                                            value: Store,
                                                                                                                                                                            children,
                                                                                                                                                                            }: StoreContextProviderProps) => React.JSX.Element;

                                                                                                                                                                              function StoreSetter

                                                                                                                                                                              StoreSetter: ({ value, name, children }: StoreSetterProps) => React.JSX.Element;
                                                                                                                                                                              • A component to set store state for a key on mount declaratively

                                                                                                                                                                                To use it, just wrap any component that need to use the corresponding store item with . This wrapping needs to be done to ensure that the corresponding store item is set before rendering the wrapped component.

                                                                                                                                                                                Tip: is a great helper for mocking the store in unit tests. Prefer it to calling the Store manually.

                                                                                                                                                                                Parameter props

                                                                                                                                                                                Parameter

                                                                                                                                                                                {string} props.name Store item key. Required. Separate with dots to namespace, e.g. 'posts.list.columns'

                                                                                                                                                                                Parameter

                                                                                                                                                                                {any} props.value Store item value. Required.

                                                                                                                                                                                Parameter

                                                                                                                                                                                {children} props.children Children are rendered as is, on mount

                                                                                                                                                                                Example 1

                                                                                                                                                                                Example 2

                                                                                                                                                                                // Using is equivalent to using useStoreContext and setting its value directly.

                                                                                                                                                                                const [, setDensity] = useStore('list.density');

                                                                                                                                                                                useEffect(() => { setDensity('small'); }, []);

                                                                                                                                                                              function substituteTokens

                                                                                                                                                                              substituteTokens: (template: any, data: any) => any;
                                                                                                                                                                              • Replace tokens by their value in the given string

                                                                                                                                                                                Parameter template

                                                                                                                                                                                The template with interpolation tokens, e.g. 'Hello, %{name}'

                                                                                                                                                                                Parameter data

                                                                                                                                                                                The data to interpolate, e.g. { name: 'John' }

                                                                                                                                                                                Returns

                                                                                                                                                                                {string} The interpolated string, e.g. 'Hello, John'

                                                                                                                                                                              function testDataProvider

                                                                                                                                                                              testDataProvider: (overrides?: Partial<DataProvider>) => DataProvider;

                                                                                                                                                                                function testI18nProvider

                                                                                                                                                                                testI18nProvider: ({
                                                                                                                                                                                translate,
                                                                                                                                                                                messages,
                                                                                                                                                                                }?: {
                                                                                                                                                                                translate?: import('../types').Translate | undefined;
                                                                                                                                                                                messages?: IMessages | undefined;
                                                                                                                                                                                }) => I18nProvider;

                                                                                                                                                                                  function TestMemoryRouter

                                                                                                                                                                                  TestMemoryRouter: ({
                                                                                                                                                                                  children,
                                                                                                                                                                                  locationCallback,
                                                                                                                                                                                  navigateCallback,
                                                                                                                                                                                  ...rest
                                                                                                                                                                                  }: {
                                                                                                                                                                                  children: React.ReactNode;
                                                                                                                                                                                  locationCallback?: (l: Location) => void;
                                                                                                                                                                                  navigateCallback?: (n: NavigateFunction) => void;
                                                                                                                                                                                  basename?: string | undefined;
                                                                                                                                                                                  initialEntries?: InitialEntry[] | undefined;
                                                                                                                                                                                  initialIndex?: number | undefined;
                                                                                                                                                                                  }) => React.JSX.Element;
                                                                                                                                                                                  • Wrapper around react-router's createMemoryRouter to be used in test components.

                                                                                                                                                                                    It is similar to MemoryRouter but it supports [data APIs](https://reactrouter.com/en/main/routers/picking-a-router#data-apis).

                                                                                                                                                                                    Additionally, it provides - a locationCallback prop to get the location in the test - a navigateCallback prop to be able to navigate in the test

                                                                                                                                                                                  function TestTranslationProvider

                                                                                                                                                                                  TestTranslationProvider: ({
                                                                                                                                                                                  translate,
                                                                                                                                                                                  messages,
                                                                                                                                                                                  children,
                                                                                                                                                                                  }: any) => React.JSX.Element;

                                                                                                                                                                                    function TranslatableContextProvider

                                                                                                                                                                                    TranslatableContextProvider: ({
                                                                                                                                                                                    children,
                                                                                                                                                                                    value,
                                                                                                                                                                                    }: {
                                                                                                                                                                                    children: ReactNode;
                                                                                                                                                                                    value: TranslatableContextValue;
                                                                                                                                                                                    }) => ReactElement;

                                                                                                                                                                                      function useAddNotificationContext

                                                                                                                                                                                      useAddNotificationContext: () => (
                                                                                                                                                                                      notification: import('./types').NotificationPayload
                                                                                                                                                                                      ) => void;

                                                                                                                                                                                        function useApplyInputDefaultValues

                                                                                                                                                                                        useApplyInputDefaultValues: ({
                                                                                                                                                                                        inputProps,
                                                                                                                                                                                        isArrayInput,
                                                                                                                                                                                        fieldArrayInputControl,
                                                                                                                                                                                        }: Props) => void;

                                                                                                                                                                                          function useAugmentedForm

                                                                                                                                                                                          useAugmentedForm: <RecordType = any>(
                                                                                                                                                                                          props: UseAugmentedFormProps<RecordType>
                                                                                                                                                                                          ) => {
                                                                                                                                                                                          form: any;
                                                                                                                                                                                          handleSubmit: (values: any, event: any) => Promise<void>;
                                                                                                                                                                                          formHandleSubmit: (event: BaseSyntheticEvent) => void;
                                                                                                                                                                                          };
                                                                                                                                                                                          • Wrapper around react-hook-form's useForm

                                                                                                                                                                                            This hook adds the following features to react-hook-form's useForm:

                                                                                                                                                                                            - form initialization based on RecordContext - validation based on a validate function - sanitization of empty values - notification on invalid form - stop form submission event propagation

                                                                                                                                                                                          function useAuthenticated

                                                                                                                                                                                          useAuthenticated: <ParamsType = any>({
                                                                                                                                                                                          params,
                                                                                                                                                                                          ...options
                                                                                                                                                                                          }?: UseAuthenticatedOptions<ParamsType>) => void;
                                                                                                                                                                                          • Restrict access to authenticated users. Redirect anonymous users to the login page.

                                                                                                                                                                                            Use it in your custom page components to require authentication.

                                                                                                                                                                                            You can set additional authParams at will if your authProvider requires it.

                                                                                                                                                                                            Example 1

                                                                                                                                                                                            import { Admin, CustomRoutes, useAuthenticated } from 'react-admin'; const FooPage = () => { useAuthenticated(); return ; } const customRoutes = [ <Route path="/foo" element={} /> ]; const App = () => ( {customRoutes} );

                                                                                                                                                                                          function useAuthProvider

                                                                                                                                                                                          useAuthProvider: <
                                                                                                                                                                                          AuthProviderType extends AuthProvider = AuthProvider
                                                                                                                                                                                          >() => AuthProviderType;
                                                                                                                                                                                          • Get the authProvider stored in the context

                                                                                                                                                                                          function useAuthState

                                                                                                                                                                                          useAuthState: <ErrorType = Error>(
                                                                                                                                                                                          params?: any,
                                                                                                                                                                                          logoutOnFailure?: boolean,
                                                                                                                                                                                          queryOptions?: UseAuthStateOptions<ErrorType>
                                                                                                                                                                                          ) => any;
                                                                                                                                                                                          • Hook for getting the authentication status

                                                                                                                                                                                            Calls the authProvider.checkAuth() method asynchronously.

                                                                                                                                                                                            The return value updates according to the authProvider request state:

                                                                                                                                                                                            - isPending: true just after mount, while the authProvider is being called. false once the authProvider has answered. - authenticated: true while loading. then true or false depending on the authProvider response.

                                                                                                                                                                                            To avoid rendering a component and force waiting for the authProvider response, use the useAuthState() hook instead of the useAuthenticated() hook.

                                                                                                                                                                                            You can render different content depending on the authenticated status.

                                                                                                                                                                                            Parameter params

                                                                                                                                                                                            Any params you want to pass to the authProvider

                                                                                                                                                                                            Parameter logoutOnFailure

                                                                                                                                                                                            : Optional. Whether the user should be logged out if the authProvider fails to authenticate them. False by default.

                                                                                                                                                                                            Returns

                                                                                                                                                                                            The current auth check state. Destructure as { authenticated, error, isPending }.

                                                                                                                                                                                            Example 1

                                                                                                                                                                                            import { useAuthState, Loading } from 'react-admin';

                                                                                                                                                                                            const MyPage = () => { const { isPending, authenticated } = useAuthState(); if (isPending) { return ; } if (authenticated) { return ; } return ; };

                                                                                                                                                                                            See Also

                                                                                                                                                                                            • useAuthenticated()

                                                                                                                                                                                          function useBasename

                                                                                                                                                                                          useBasename: () => string;
                                                                                                                                                                                          • Get the string to append to all links to the admin app.

                                                                                                                                                                                            Useful when the app is mounted on a sub path, e.g. '/admin'.

                                                                                                                                                                                            This hook is used internally by all react-admin components that contain a link, and requires that the basename is set via the <BasenameContextProvider> component (or via the <Admin> component, which calls BasenameContextProvider internally).

                                                                                                                                                                                            Example 1

                                                                                                                                                                                            import { useBasename } from 'react-admin';

                                                                                                                                                                                            const ArticleLink = ({ title, id }) => { const basename = useBasename(); return <a href={${basename}/articles/${id}}>{title}; };

                                                                                                                                                                                            See Also

                                                                                                                                                                                            • BasenameContextProvider

                                                                                                                                                                                          function useCheckAuth

                                                                                                                                                                                          useCheckAuth: () => CheckAuth;
                                                                                                                                                                                          • Get a callback for calling the authProvider.checkAuth() method. In case of rejection, redirects to the login page, displays a notification, and throws an error.

                                                                                                                                                                                            This is a low level hook. See those more specialized hooks for common authentication tasks, based on useCheckAuth.

                                                                                                                                                                                            Returns

                                                                                                                                                                                            {Function} checkAuth callback

                                                                                                                                                                                            Example 1

                                                                                                                                                                                            import { useCheckAuth } from 'react-admin';

                                                                                                                                                                                            const MyProtectedPage = () => { const checkAuth = useCheckAuth(); useEffect(() => { checkAuth().catch(() => {}); }, []); return Private content: EZAEZEZAET } // tip: use useAuthenticated() hook instead

                                                                                                                                                                                            const MyPage = () => { const checkAuth = useCheckAuth(); const [authenticated, setAuthenticated] = useState(true); // optimistic auth useEffect(() => { checkAuth({}, false) .then(() => setAuthenticated(true)) .catch(() => setAuthenticated(false)); }, []); return authenticated ? : ; } // tip: use useAuthState() hook instead

                                                                                                                                                                                            See Also

                                                                                                                                                                                            • useAuthenticated

                                                                                                                                                                                            • useAuthState

                                                                                                                                                                                          function useCheckForApplicationUpdate

                                                                                                                                                                                          useCheckForApplicationUpdate: (
                                                                                                                                                                                          options: UseCheckForApplicationUpdateOptions
                                                                                                                                                                                          ) => void;
                                                                                                                                                                                          • Checks if the application code has changed and calls the provided onNewVersionAvailable function when needed.

                                                                                                                                                                                            It checks for code update by downloading the provided URL (default to the HTML page) and comparing the hash of the response with the hash of the current page.

                                                                                                                                                                                            Parameter options

                                                                                                                                                                                            The options

                                                                                                                                                                                            Parameter

                                                                                                                                                                                            {Function} options.onNewVersionAvailable The function to call when a new version of the application is available.

                                                                                                                                                                                            Parameter

                                                                                                                                                                                            {string} options.url Optional. The URL to download to check for code update. Defaults to the current URL.

                                                                                                                                                                                            Parameter

                                                                                                                                                                                            {RequestInit} options.fetchOptions Optional. The options passed to fetch function when checking for update.

                                                                                                                                                                                            Parameter

                                                                                                                                                                                            {number} options.interval Optional. The interval in milliseconds between two checks. Defaults to 3600000 (1 hour).

                                                                                                                                                                                            Parameter

                                                                                                                                                                                            {boolean} options.disabled Optional. Whether the check should be disabled. Defaults to false.

                                                                                                                                                                                          function useCheckMinimumRequiredProps

                                                                                                                                                                                          useCheckMinimumRequiredProps: (
                                                                                                                                                                                          displayName: string,
                                                                                                                                                                                          requiredProps: string[],
                                                                                                                                                                                          props: any
                                                                                                                                                                                          ) => void;

                                                                                                                                                                                            function useChoices

                                                                                                                                                                                            useChoices: ({
                                                                                                                                                                                            optionText,
                                                                                                                                                                                            optionValue,
                                                                                                                                                                                            disableValue,
                                                                                                                                                                                            translateChoice,
                                                                                                                                                                                            }: UseChoicesOptions) => {
                                                                                                                                                                                            getChoiceText: (choice: any) => string | React.JSX.Element;
                                                                                                                                                                                            getChoiceValue: (choice: any) => any;
                                                                                                                                                                                            getDisableValue: (choice: any) => any;
                                                                                                                                                                                            };

                                                                                                                                                                                              function useChoicesContext

                                                                                                                                                                                              useChoicesContext: <
                                                                                                                                                                                              ChoicesType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                                              >(
                                                                                                                                                                                              options?: Partial<ChoicesContextValue<any>> & { choices?: ChoicesType[] }
                                                                                                                                                                                              ) => ChoicesContextValue<ChoicesType>;

                                                                                                                                                                                                function useCreate

                                                                                                                                                                                                useCreate: <
                                                                                                                                                                                                RecordType extends Omit<RaRecord<Identifier>, 'id'> = any,
                                                                                                                                                                                                MutationError = unknown,
                                                                                                                                                                                                ResultRecordType extends RaRecord<Identifier> = RecordType & { id: Identifier }
                                                                                                                                                                                                >(
                                                                                                                                                                                                resource?: string,
                                                                                                                                                                                                params?: Partial<CreateParams<Partial<RecordType>>>,
                                                                                                                                                                                                options?: UseCreateOptions<RecordType, MutationError, ResultRecordType>
                                                                                                                                                                                                ) => UseCreateResult<RecordType, boolean, MutationError, ResultRecordType>;
                                                                                                                                                                                                • Get a callback to call the dataProvider.create() method, the result and the loading state.

                                                                                                                                                                                                  Parameter resource

                                                                                                                                                                                                  Parameter params

                                                                                                                                                                                                  The create parameters { data }

                                                                                                                                                                                                  Parameter options

                                                                                                                                                                                                  Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }

                                                                                                                                                                                                  Params params.data The record to create, e.g. { title: 'hello, world' }

                                                                                                                                                                                                  Returns

                                                                                                                                                                                                  The current mutation state. Destructure as [create, { data, error, isPending }].

                                                                                                                                                                                                  The return value updates according to the request state:

                                                                                                                                                                                                  - initial: [create, { isPending: false, isIdle: true }] - start: [create, { isPending: true }] - success: [create, { data: [data from response], isPending: false, isSuccess: true }] - error: [create, { error: [error from response], isPending: false, isError: true }]

                                                                                                                                                                                                  The create() function must be called with a resource and a parameter object: create(resource, { data, meta }, options)

                                                                                                                                                                                                  This hook uses react-query useMutation under the hood. This means the state object contains mutate, isIdle, reset and other react-query methods.

                                                                                                                                                                                                  Example 1

                                                                                                                                                                                                  // set params when calling the create callback

                                                                                                                                                                                                  import { useCreate, useRecordContext } from 'react-admin';

                                                                                                                                                                                                  const LikeButton = () => { const record = useRecordContext(); const like = { postId: record.id }; const [create, { isPending, error }] = useCreate(); const handleClick = () => { create('likes', { data: like }) } if (error) { return ERROR; } return <button disabled={isPending} onClick={handleClick}>Like; };

                                                                                                                                                                                                  Example 2

                                                                                                                                                                                                  // set params when calling the hook

                                                                                                                                                                                                  import { useCreate, useRecordContext } from 'react-admin';

                                                                                                                                                                                                  const LikeButton = () => { const record = useRecordContext(); const like = { postId: record.id }; const [create, { isPending, error }] = useCreate('likes', { data: like }); if (error) { return ERROR; } return <button disabled={isPending} onClick={() => create()}>Like; };

                                                                                                                                                                                                  Example 3

                                                                                                                                                                                                  // TypeScript const [create, { data }] = useCreate('products', { data: product }); -- data is Product

                                                                                                                                                                                                  See Also

                                                                                                                                                                                                  • https://tanstack.com/query/v5/docs/react/reference/useMutation

                                                                                                                                                                                                function useCreateContext

                                                                                                                                                                                                useCreateContext: <
                                                                                                                                                                                                RecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                                                >() => CreateControllerResult<RecordType>;
                                                                                                                                                                                                • Hook to read the create controller props from the CreateContext.

                                                                                                                                                                                                  Used within a (e.g. as a descendent of ).

                                                                                                                                                                                                  Returns

                                                                                                                                                                                                  {CreateControllerResult} create controller props

                                                                                                                                                                                                  See Also

                                                                                                                                                                                                  • useCreateController for how it is filled

                                                                                                                                                                                                function useCreateController

                                                                                                                                                                                                useCreateController: <
                                                                                                                                                                                                RecordType extends Omit<RaRecord<Identifier>, 'id'> = any,
                                                                                                                                                                                                MutationOptionsError = Error,
                                                                                                                                                                                                ResultRecordType extends RaRecord<Identifier> = RecordType & { id: Identifier }
                                                                                                                                                                                                >(
                                                                                                                                                                                                props?: CreateControllerProps<RecordType, MutationOptionsError, ResultRecordType>
                                                                                                                                                                                                ) => CreateControllerResult<RecordType>;
                                                                                                                                                                                                • Prepare data for the Create view

                                                                                                                                                                                                  Parameter props

                                                                                                                                                                                                  The props passed to the Create component.

                                                                                                                                                                                                  {Object} controllerProps Fetched data and callbacks for the Create view

                                                                                                                                                                                                  Example 1

                                                                                                                                                                                                  import { useCreateController } from 'react-admin'; import CreateView from './CreateView';

                                                                                                                                                                                                  const MyCreate = props => { const controllerProps = useCreateController(props); return <CreateView {...controllerProps} {...props} />; }

                                                                                                                                                                                                function useCreatePath

                                                                                                                                                                                                useCreatePath: () => ({ resource, id, type }: CreatePathParams) => string;
                                                                                                                                                                                                • Get a callback to create a link to a given page in the admin app.

                                                                                                                                                                                                  The callback expects an object as parameter, containing the following properties: - type: 'list', 'edit', 'show' or 'create' - resource - id (optional), for 'edit' or 'show' pages

                                                                                                                                                                                                  This is used internally by react-admin to allow default components to work in applications that are mounted on a sub path, e.g. '/admin'. If your app is mounted in the root path, you don't need it, and you can create links by hand, e.g. '/articles/1/show'.

                                                                                                                                                                                                  Example 1

                                                                                                                                                                                                  import { useCreatePath, useRecordContext } from 'react-admin'; import { useNavigate } from 'react-router-dom';

                                                                                                                                                                                                  const PostEditButton = () => { const createPath = useCreatePath(); const record = useRecordContext(); const navigate = useNavigate();

                                                                                                                                                                                                  const handleClick = () => { const link = createPath({ type: 'edit', resource: 'posts', id: record.id }); navigate(link); };

                                                                                                                                                                                                  return <button onClick={handleClick}>Edit Post; };

                                                                                                                                                                                                function useDataProvider

                                                                                                                                                                                                useDataProvider: <
                                                                                                                                                                                                TDataProvider extends DataProvider<string> = DataProvider<string>
                                                                                                                                                                                                >() => TDataProvider;

                                                                                                                                                                                                  function useDeepCompareEffect

                                                                                                                                                                                                  useDeepCompareEffect: (callback: any, inputs: any) => void;

                                                                                                                                                                                                    function useDefaultTitle

                                                                                                                                                                                                    useDefaultTitle: () => TitleComponent;
                                                                                                                                                                                                    • Get the application title defined at the <Admin> level

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useDefaultTitle } from 'react-admin';

                                                                                                                                                                                                      const AppBar = () => { const defaultTitle = useDefaultTitle(); return {defaultTitle}; }

                                                                                                                                                                                                    function useDelete

                                                                                                                                                                                                    useDelete: <
                                                                                                                                                                                                    RecordType extends RaRecord<Identifier> = any,
                                                                                                                                                                                                    MutationError = unknown
                                                                                                                                                                                                    >(
                                                                                                                                                                                                    resource?: string,
                                                                                                                                                                                                    params?: Partial<DeleteParams<RecordType>>,
                                                                                                                                                                                                    options?: any
                                                                                                                                                                                                    ) => UseDeleteResult<RecordType, MutationError>;
                                                                                                                                                                                                    • Get a callback to call the dataProvider.delete() method, the result and the loading state.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The delete parameters { id, previousData }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } } May include a mutation mode (optimistic/pessimistic/undoable), e.g. { mutationMode: 'undoable' }

                                                                                                                                                                                                      Params params.id The resource identifier, e.g. 123 params.previousData The record before the update is applied

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current mutation state. Destructure as [deleteOne, { data, error, isPending }].

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - initial: [deleteOne, { isPending: false, isIdle: true }] - start: [deleteOne, { isPending: true }] - success: [deleteOne, { data: [data from response], isPending: false, isSuccess: true }] - error: [deleteOne, { error: [error from response], isPending: false, isError: true }]

                                                                                                                                                                                                      The deleteOne() function must be called with a resource and a parameter object: deleteOne(resource, { id, previousData, meta }, options)

                                                                                                                                                                                                      This hook uses react-query useMutation under the hood. This means the state object contains mutate, isIdle, reset and other react-query methods.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      // set params when calling the deleteOne callback

                                                                                                                                                                                                      import { useDelete, useRecordContext } from 'react-admin';

                                                                                                                                                                                                      const DeleteButton = () => { const record = useRecordContext(); const [deleteOne, { isPending, error }] = useDelete(); const handleClick = () => { deleteOne('likes', { id: record.id, previousData: record }) } if (error) { return ERROR; } return <button disabled={isPending} onClick={handleClick}>Delete; };

                                                                                                                                                                                                      Example 2

                                                                                                                                                                                                      // set params when calling the hook

                                                                                                                                                                                                      import { useDelete, useRecordContext } from 'react-admin';

                                                                                                                                                                                                      const DeleteButton = () => { const record = useRecordContext(); const [deleteOne, { isPending, error }] = useDelete('likes', { id: record.id, previousData: record }); if (error) { return ERROR; } return <button disabled={isPending} onClick={() => deleteOne()}>Delete; };

                                                                                                                                                                                                      Example 3

                                                                                                                                                                                                      // TypeScript const [delete, { data }] = useDelete('products', { id, previousData: product }); -- data is Product

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • https://tanstack.com/query/v5/docs/react/reference/useMutation

                                                                                                                                                                                                    function useDeleteMany

                                                                                                                                                                                                    useDeleteMany: <
                                                                                                                                                                                                    RecordType extends RaRecord<Identifier> = any,
                                                                                                                                                                                                    MutationError = unknown
                                                                                                                                                                                                    >(
                                                                                                                                                                                                    resource?: string,
                                                                                                                                                                                                    params?: Partial<DeleteManyParams<RecordType>>,
                                                                                                                                                                                                    options?: any
                                                                                                                                                                                                    ) => UseDeleteManyResult<RecordType, MutationError>;
                                                                                                                                                                                                    • Get a callback to call the dataProvider.delete() method, the result and the loading state.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The delete parameters { ids }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } } May include a mutation mode (optimistic/pessimistic/undoable), e.g. { mutationMode: 'undoable' }

                                                                                                                                                                                                      Params params.ids The resource identifiers, e.g. [123, 456]

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current mutation state. Destructure as [deleteMany, { data, error, isPending }].

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - initial: [deleteMany, { isPending: false, isIdle: true }] - start: [deleteMany, { isPending: true }] - success: [deleteMany, { data: [data from response], isPending: false, isSuccess: true }] - error: [deleteMany, { error: [error from response], isPending: false, isError: true }]

                                                                                                                                                                                                      The deleteMany() function must be called with a resource and a parameter object: deleteMany(resource, { ids, meta }, options)

                                                                                                                                                                                                      This hook uses react-query useMutation under the hood. This means the state object contains mutate, isIdle, reset and other react-query methods.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      // set params when calling the deleteMany callback

                                                                                                                                                                                                      import { useDeleteMany } from 'react-admin';

                                                                                                                                                                                                      const BulkDeletePostsButton = ({ selectedIds }) => { const [deleteMany, { isPending, error }] = useDeleteMany(); const handleClick = () => { deleteMany('posts', { ids: selectedIds }) } if (error) { return ERROR; } return <button disabled={isPending} onClick={handleClick}>Delete selected posts; };

                                                                                                                                                                                                      Example 2

                                                                                                                                                                                                      // set params when calling the hook

                                                                                                                                                                                                      import { useDeleteMany } from 'react-admin';

                                                                                                                                                                                                      const BulkDeletePostsButton = ({ selectedIds }) => { const [deleteMany, { isPending, error }] = useDeleteMany('posts', { ids: selectedIds }); const handleClick = () => { deleteMany() } if (error) { return ERROR; } return <button disabled={isPending} onClick={handleClick}>Delete selected posts; };

                                                                                                                                                                                                      Example 3

                                                                                                                                                                                                      // TypeScript const [deleteMany, { data }] = useDeleteMany('products', { ids }); -- data is Product

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • https://tanstack.com/query/v5/docs/react/reference/useMutation

                                                                                                                                                                                                    function useDeleteWithConfirmController

                                                                                                                                                                                                    useDeleteWithConfirmController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    props: UseDeleteWithConfirmControllerParams<RecordType, unknown>
                                                                                                                                                                                                    ) => UseDeleteWithConfirmControllerReturn;
                                                                                                                                                                                                    • Prepare a set of callbacks for a delete button guarded by confirmation dialog

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const DeleteButton = ({ resource, record, redirect, onClick, ...rest }) => { const { open, isPending, handleDialogOpen, handleDialogClose, handleDelete, } = useDeleteWithConfirmController({ resource, record, redirect, onClick, });

                                                                                                                                                                                                      return ( <Button onClick={handleDialogOpen} label="ra.action.delete" {...rest} > {icon} <Confirm isOpen={open} loading={isPending} title="ra.message.delete_title" content="ra.message.delete_content" translateOptions={{ name: resource, id: record.id, }} onConfirm={handleDelete} onClose={handleDialogClose} /> ); };

                                                                                                                                                                                                    function useDeleteWithUndoController

                                                                                                                                                                                                    useDeleteWithUndoController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    props: UseDeleteWithUndoControllerParams<RecordType, unknown>
                                                                                                                                                                                                    ) => UseDeleteWithUndoControllerReturn;
                                                                                                                                                                                                    • Prepare callback for a Delete button with undo support

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import React from 'react'; import ActionDelete from '@mui/icons-material/Delete'; import { Button, useDeleteWithUndoController } from 'react-admin';

                                                                                                                                                                                                      const DeleteButton = ({ resource, record, redirect, onClick, ...rest }) => { const { isPending, handleDelete } = useDeleteWithUndoController({ resource, record, redirect, onClick, });

                                                                                                                                                                                                      return ( <Button onClick={handleDelete} disabled={isPending} label="ra.action.delete" {...rest} > ); };

                                                                                                                                                                                                    function useEditContext

                                                                                                                                                                                                    useEditContext: <
                                                                                                                                                                                                    RecordType extends RaRecord<Identifier> = any
                                                                                                                                                                                                    >() => EditControllerResult<RecordType>;
                                                                                                                                                                                                    • Hook to read the edit controller props from the EditContext.

                                                                                                                                                                                                      Used within a (e.g. as a descendent of ).

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {EditControllerResult} edit controller props

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • useEditController for how it is filled

                                                                                                                                                                                                    function useEditController

                                                                                                                                                                                                    useEditController: <
                                                                                                                                                                                                    RecordType extends RaRecord<Identifier> = any,
                                                                                                                                                                                                    ErrorType = Error
                                                                                                                                                                                                    >(
                                                                                                                                                                                                    props?: EditControllerProps<RecordType, ErrorType>
                                                                                                                                                                                                    ) => EditControllerResult<RecordType>;
                                                                                                                                                                                                    • Prepare data for the Edit view.

                                                                                                                                                                                                      useEditController does a few things: - it grabs the id from the URL and the resource name from the ResourceContext, - it fetches the record via useGetOne, - it prepares the page title.

                                                                                                                                                                                                      Parameter props

                                                                                                                                                                                                      The props passed to the Edit component.

                                                                                                                                                                                                      {Object} controllerProps Fetched data and callbacks for the Edit view

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useEditController } from 'react-admin'; import EditView from './EditView';

                                                                                                                                                                                                      const MyEdit = () => { const controllerProps = useEditController({ resource: 'posts', id: 123 }); return <EditView {...controllerProps} {...props} />; }

                                                                                                                                                                                                    function useEvent

                                                                                                                                                                                                    useEvent: <Args extends unknown[], Return>(
                                                                                                                                                                                                    fn: (...args: Args) => Return
                                                                                                                                                                                                    ) => (...args: Args) => Return;
                                                                                                                                                                                                    • Alternative to useCallback that doesn't update the callback when dependencies change

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback

                                                                                                                                                                                                      • https://github.com/facebook/react/issues/14099#issuecomment-440013892

                                                                                                                                                                                                    function useExpandAll

                                                                                                                                                                                                    useExpandAll: (resource: string, ids: Identifier[]) => [boolean, () => void];
                                                                                                                                                                                                    • State-like hook for controlling the expanded state of many list items expanded state is true when at least one item from ids is expanded.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter ids

                                                                                                                                                                                                      A list of record identifiers

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {Object} Destructure as [expanded, toggleExpanded].

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const [expanded, toggleExpanded] = useExpandAll('posts', [123, 124, 125]); const expandIcon = expanded ? ExpandLess : ExpandMore; const onExpandClick = () => toggleExpanded();

                                                                                                                                                                                                    function useExpanded

                                                                                                                                                                                                    useExpanded: (
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    id: Identifier,
                                                                                                                                                                                                    single?: boolean
                                                                                                                                                                                                    ) => [boolean, () => void];
                                                                                                                                                                                                    • State-like hook for controlling the expanded state of a list item

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter id

                                                                                                                                                                                                      The record identifier, e.g. 123

                                                                                                                                                                                                      Parameter single

                                                                                                                                                                                                      Forces only one id to be expanded at a time

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {Object} Destructure as [expanded, toggleExpanded].

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const [expanded, toggleExpanded] = useExpanded('posts', 123); const expandIcon = expanded ? ExpandLess : ExpandMore; const onExpandClick = () => toggleExpanded();

                                                                                                                                                                                                    function useFieldValue

                                                                                                                                                                                                    useFieldValue: <RecordType extends Record<string, any> = Record<string, any>>(
                                                                                                                                                                                                    params: UseFieldValueOptions<RecordType>
                                                                                                                                                                                                    ) => any;
                                                                                                                                                                                                    • A hook that gets the value of a field of the current record.

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The hook parameters

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      params.source The field source

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      params.record The record to use. Uses the record from the RecordContext if not provided

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      params.defaultValue The value to return when the field value is empty

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The field value

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const MyField = (props: { source: string }) => { const value = useFieldValue(props); return {value}; }

                                                                                                                                                                                                    function useFilterState

                                                                                                                                                                                                    useFilterState: ({
                                                                                                                                                                                                    filterToQuery,
                                                                                                                                                                                                    permanentFilter,
                                                                                                                                                                                                    debounceTime,
                                                                                                                                                                                                    }: UseFilterStateOptions) => UseFilterStateProps;
                                                                                                                                                                                                    • Hooks to provide filter state and setFilter which updates the query part of the filter

                                                                                                                                                                                                      Parameter option

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {Function} option.filterToQuery Function to convert the filter string to a filter object. Defaults to v => ({ q: v }).

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {Object} option.permanentFilter Permanent filter to be merged with the filter string. Defaults to {}.

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {number} option.debounceTime Time in ms between filter updates - used to debounce the search. Defaults to 500ms.

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {UseFilterStateOptions} The filter props

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const { filter, setFilter } = useFilter({ filterToQuery: v => ({ query: v }), permanentFilter: { foo: 'bar' }, debounceTime: 500, }); // filter initial value: { query: '', foo: 'bar' } // after updating filter setFilter('needle'); { query: 'needle', foo: 'bar' }

                                                                                                                                                                                                    function useFormGroup

                                                                                                                                                                                                    useFormGroup: (name: string) => FormGroupState;
                                                                                                                                                                                                    • Retrieve a specific form group data such as its validation status (valid/invalid) or or whether its inputs have been updated (dirty/pristine)

                                                                                                                                                                                                      Parameter name

                                                                                                                                                                                                      The form group name

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {FormGroupState} The form group state

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { Edit, SimpleForm, TextInput, FormGroupContextProvider, useFormGroup, minLength } from 'react-admin'; import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMoreIcon';

                                                                                                                                                                                                      const PostEdit = () => ( <AccordionSummary expandIcon={} aria-controls="options-content" id="options-header" > Options <TextInput source="teaser" validate={minLength(20)} /> );

                                                                                                                                                                                                      const AccordionSectionTitle = ({ children, name }) => { const formGroupState = useFormGroup(name); return ( <Typography color={!formGroupState.isValid && formGroupState.isDirty ? 'error' : 'inherit'}> {children} ); }

                                                                                                                                                                                                    function useFormGroupContext

                                                                                                                                                                                                    useFormGroupContext: () => string | null;
                                                                                                                                                                                                    • Retrieve the name of the form group the consumer belongs to. May be undefined if the consumer is not inside a form group.

                                                                                                                                                                                                    function useFormGroups

                                                                                                                                                                                                    useFormGroups: () =>
                                                                                                                                                                                                    | import('./FormGroupsContext').FormGroupsContextValue
                                                                                                                                                                                                    | undefined;
                                                                                                                                                                                                    • Retrieve the form groups management context. Used by inputs to register themselves into a form group.

                                                                                                                                                                                                    function useGetIdentity

                                                                                                                                                                                                    useGetIdentity: <ErrorType extends Error = Error>(
                                                                                                                                                                                                    options?: UseGetIdentityOptions<ErrorType>
                                                                                                                                                                                                    ) => any;
                                                                                                                                                                                                    • Return the current user identity by calling authProvider.getIdentity() on mount

                                                                                                                                                                                                      The return value updates according to the call state:

                                                                                                                                                                                                      - mount: { isPending: true } - success: { identity, refetch: () => {}, isPending: false } - error: { error: Error, isPending: false }

                                                                                                                                                                                                      The implementation is left to the authProvider.

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current user identity. Destructure as { isPending, identity, error, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetIdentity, useGetOne } from 'react-admin';

                                                                                                                                                                                                      const PostDetail = ({ id }) => { const { data: post, isPending: postLoading } = useGetOne('posts', { id }); const { identity, isPending: identityLoading } = useGetIdentity(); if (postLoading || identityLoading) return <>Loading...</>; if (!post.lockedBy || post.lockedBy === identity.id) { // post isn't locked, or is locked by me return <PostEdit post={post} /> } else { // post is locked by someone else and cannot be edited return <PostShow post={post} /> } }

                                                                                                                                                                                                    function useGetList

                                                                                                                                                                                                    useGetList: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    params?: Partial<GetListParams>,
                                                                                                                                                                                                    options?: UseGetListOptions<RecordType>
                                                                                                                                                                                                    ) => any;
                                                                                                                                                                                                    • Call the dataProvider.getList() method and return the resolved result as well as the loading state.

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - start: { isPending: true, refetch } - success: { data: [data from store], total: [total from response], isPending: false, refetch } - error: { error: [error from response], isPending: false, refetch }

                                                                                                                                                                                                      This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getList parameters { pagination, sort, filter, meta }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }

                                                                                                                                                                                                      Params params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 } params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' } params.filter The request filters, e.g. { title: 'hello, world' } params.meta Optional meta parameters

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, total, error, isPending, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetList } from 'react-admin';

                                                                                                                                                                                                      const LatestNews = () => { const { data, total, isPending, error } = useGetList( 'posts', { pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } } ); if (isPending) { return ; } if (error) { return ERROR; } return {data.map(item => <li key={item.id}>{item.title} )}; };

                                                                                                                                                                                                    function useGetMany

                                                                                                                                                                                                    useGetMany: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    params: Partial<GetManyParams<RecordType>>,
                                                                                                                                                                                                    options?: UseGetManyOptions<RecordType>
                                                                                                                                                                                                    ) => UseQueryResult<RecordType[], Error>;
                                                                                                                                                                                                    • Call the dataProvider.getMany() method and return the resolved result as well as the loading state.

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - start: { isPending: true, refetch } - success: { data: [data from store], isPending: false, refetch } - error: { error: [error from response], isPending: false, refetch }

                                                                                                                                                                                                      This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getMany parameters { ids, meta }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }

                                                                                                                                                                                                      Params params.ids The ids to get, e.g. [123, 456, 789] params.meta Optional meta parameters

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, error, isPending, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetMany } from 'react-admin';

                                                                                                                                                                                                      const PostTags = ({ post }) => { const { data, isPending, error } = useGetMany( 'tags', { ids: post.tags }, ); if (isPending) { return ; } if (error) { return ERROR; } return {data.map(tag => <li key={tag.id}>{tag.name} )}; };

                                                                                                                                                                                                    function useGetManyAggregate

                                                                                                                                                                                                    useGetManyAggregate: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    params: Partial<GetManyParams<RecordType>>,
                                                                                                                                                                                                    options?: UseGetManyAggregateOptions<RecordType>
                                                                                                                                                                                                    ) => UseQueryResult<RecordType[], Error>;
                                                                                                                                                                                                    • Call the dataProvider.getMany() method and return the resolved result as well as the loading state.

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - start: { isPending: true, isFetching: true, refetch } - success: { data: [data from response], isPending: false, isFetching: false, refetch } - error: { error: [error from response], isPending: false, isFetching: false, refetch }

                                                                                                                                                                                                      This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                      This hook aggregates and deduplicates calls to the same resource, so for instance, if an app calls:

                                                                                                                                                                                                      useGetManyAggregate('tags', [1, 2, 3]); useGetManyAggregate('tags', [3, 4]);

                                                                                                                                                                                                      during the same tick, the hook will only call the dataProvider once with the following parameters:

                                                                                                                                                                                                      dataProvider.getMany('tags', [1, 2, 3, 4])

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getMany parameters { ids, meta }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the dataProvider.

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {boolean} options.enabled Flag to conditionally run the query. If it's false, the query will not run

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {Function} options.onSuccess Side effect function to be executed upon success, e.g. { onSuccess: { refresh: true } }

                                                                                                                                                                                                      Parameter

                                                                                                                                                                                                      {Function} options.onError Side effect function to be executed upon failure, e.g. { onError: error => notify(error.message) }

                                                                                                                                                                                                      Params params.ids The ids to get, e.g. [123, 456, 789] params.meta Optional meta parameters

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, error, isPending, isFetching, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetManyAggregate, useRecordContext } from 'react-admin';

                                                                                                                                                                                                      const PostTags = () => { const record = useRecordContext(); const { data, isPending, error } = useGetManyAggregate('tags', { ids: record.tagIds }); if (isPending) { return ; } if (error) { return ERROR; } return ( {data.map(tag => ( <li key={tag.id}>{tag.name} ))} ); };

                                                                                                                                                                                                    function useGetManyReference

                                                                                                                                                                                                    useGetManyReference: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    params?: Partial<GetManyReferenceParams>,
                                                                                                                                                                                                    options?: UseGetManyReferenceHookOptions<RecordType>
                                                                                                                                                                                                    ) => any;
                                                                                                                                                                                                    • Call the dataProvider.getManyReference() method and return the resolved result as well as the loading state.

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - start: { isPending: true, refetch } - success: { data: [data from store], total: [total from response], isPending: false, refetch } - error: { error: [error from response], isPending: false, refetch }

                                                                                                                                                                                                      This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getManyReference parameters { target, id, pagination, sort, filter, meta }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { refresh(); } }

                                                                                                                                                                                                      Params params.target The target resource key, e.g. 'post_id' params.id The identifier of the record to look for in target, e.g. '123' params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 } params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' } params.filter The request filters, e.g. { title: 'hello, world' } params.meta Optional meta parameters

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, total, error, isPending, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetManyReference, useRecordContext } from 'react-admin';

                                                                                                                                                                                                      const PostComments = () => { const record = useRecordContext(); // fetch all comments related to the current record const { data, isPending, error } = useGetManyReference( 'comments', { target: 'post_id', id: record.id, pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } } ); if (isPending) { return ; } if (error) { return ERROR; } return {data.map(comment => <li key={comment.id}>{comment.body} )}; };

                                                                                                                                                                                                    function useGetOne

                                                                                                                                                                                                    useGetOne: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    { id, meta }: Partial<GetOneParams<RecordType>>,
                                                                                                                                                                                                    options?: UseGetOneOptions<RecordType>
                                                                                                                                                                                                    ) => UseQueryResult<RecordType>;
                                                                                                                                                                                                    • Call the dataProvider.getOne() method and return the resolved value as well as the loading state.

                                                                                                                                                                                                      The return value updates according to the request state:

                                                                                                                                                                                                      - start: { isPending: true, isFetching: true, refetch } - success: { data: [data from response], isPending: false, refetch } - error: { error: [error from response], isPending: false, refetch }

                                                                                                                                                                                                      This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getOne parameters { id, meta }, e.g. { id: 123 }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the react-query queryClient.

                                                                                                                                                                                                      Params id a resource identifier, e.g. 123

                                                                                                                                                                                                      Options enabled Flag to conditionally run the query. If it's false, the query will not run onSuccess Side effect function to be executed upon success, e.g. { onSuccess: { refresh: true } } onError Side effect function to be executed upon failure, e.g. { onError: error => notify(error.message) }

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, error, isPending, refetch }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetOne, useRecordContext } from 'react-admin';

                                                                                                                                                                                                      const UserProfile = () => { const record = useRecordContext(); const { data, isPending, error } = useGetOne('users', { id: record.id }); if (isPending) { return ; } if (error) { return ERROR; } return User {data.username}; };

                                                                                                                                                                                                    function useGetPermissions

                                                                                                                                                                                                    useGetPermissions: () => GetPermissions;
                                                                                                                                                                                                    • Get a callback for calling the authProvider.getPermissions() method.

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {Function} getPermissions callback

                                                                                                                                                                                                      This is a low level hook. See those more specialized hooks offering state handling.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useGetPermissions } from 'react-admin';

                                                                                                                                                                                                      const Roles = () => { const [permissions, setPermissions] = useState([]); const getPermissions = useGetPermissions(); useEffect(() => { getPermissions().then(permissions => setPermissions(permissions)) }, []) return ( {permissions.map((permission, key) => ( <li key={key}>{permission} ))} ); }

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • useAuthProvider

                                                                                                                                                                                                      • usePermissions

                                                                                                                                                                                                    function useGetRecordId

                                                                                                                                                                                                    useGetRecordId: (recordId?: Identifier) => Identifier;
                                                                                                                                                                                                    • Helper hook to get the current recordId.

                                                                                                                                                                                                      recordId is obtained from parameters if passed as a parameter, or from the RecordContext if there is one, or, lastly, from the react-router URL.

                                                                                                                                                                                                      Parameter recordId

                                                                                                                                                                                                      optional if used inside a RecordContextProvider or if recordId can be guessed from the URL

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The recordId determined in this manner.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const recordId = useGetRecordId();

                                                                                                                                                                                                    function useGetRecordRepresentation

                                                                                                                                                                                                    useGetRecordRepresentation: (resource?: string) => (record: any) => ReactNode;
                                                                                                                                                                                                    • Get default string representation of a record

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      // No customization const getRecordRepresentation = useGetRecordRepresentation('posts'); getRecordRepresentation({ id: 1, title: 'Hello' }); // => "#1"

                                                                                                                                                                                                      Example 2

                                                                                                                                                                                                      // With const getRecordRepresentation = useGetRecordRepresentation('posts'); getRecordRepresentation({ id: 1, title: 'Hello' }); // => "Hello"

                                                                                                                                                                                                    function useGetResourceLabel

                                                                                                                                                                                                    useGetResourceLabel: () => GetResourceLabel;
                                                                                                                                                                                                    • A hook which returns function to get a translated resource name. It will use the label option of the Resource component if it was provided.

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {GetResourceLabel} A function which takes a resource name and an optional number indicating the number of items (used for pluralization) and returns a translated string.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const Menu = () => { const resources = useResourceDefinitions(); const getResourceLabel = useGetResourceLabel();

                                                                                                                                                                                                      return ( {Object.keys(resources).map(name => ( <li key={name}> {getResourceLabel(name, 2)} ))} ) }

                                                                                                                                                                                                    function useGetValidationErrorMessage

                                                                                                                                                                                                    useGetValidationErrorMessage: () => (error: ValidationErrorMessage) => string;
                                                                                                                                                                                                    • Example 1

                                                                                                                                                                                                      const MyInput = props => { const { field, fieldState } = useController(props); useEffect(() => { if (fieldState.error) { const errorMessage = useGetValidationErrorMessage(fieldState.error); alert(errorMessage); } }, [fieldState.error]);

                                                                                                                                                                                                      return ( <input {...field} /> ); }

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • ValidationErrorMessage

                                                                                                                                                                                                      • ValidationErrorMessageWithArgs

                                                                                                                                                                                                      Deprecated

                                                                                                                                                                                                      This internal hook returns a function that can translate an error message. It handles simple string errors and those which have a message and args. Only useful if you are implementing custom inputs without leveraging our useInput hook.

                                                                                                                                                                                                    function useHandleAuthCallback

                                                                                                                                                                                                    useHandleAuthCallback: (options?: UseHandleAuthCallbackOptions) => any;
                                                                                                                                                                                                    • This hook calls the authProvider.handleCallback() method on mount. This is meant to be used in a route called by an external authentication service (e.g. Auth0) after the user has logged in. By default, it redirects to application home page upon success, or to the redirectTo location returned by authProvider. handleCallback.

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      An object containing { isPending, data, error, refetch }.

                                                                                                                                                                                                    function useHasDashboard

                                                                                                                                                                                                    useHasDashboard: () => boolean;
                                                                                                                                                                                                    • Returns true if the app has a dashboard defined at the level.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useHasDashboard } from 'react-admin';

                                                                                                                                                                                                      const MyMenu = () => { const hasDashboard = useHasDashboard(); return ( {hasDashboard && } ); }

                                                                                                                                                                                                    function useI18nProvider

                                                                                                                                                                                                    useI18nProvider: () => import('..').I18nProvider;
                                                                                                                                                                                                    • Get the i18nProvider instance declared in the component

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      const CurrentLanguage = () => { const i18nProvider = useI18nProvider(); const locale = i18nProvider.getLocale(); return {locale}; };

                                                                                                                                                                                                    function useInfiniteGetList

                                                                                                                                                                                                    useInfiniteGetList: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    resource: string,
                                                                                                                                                                                                    params?: Partial<GetListParams>,
                                                                                                                                                                                                    options?: UseInfiniteGetListOptions<RecordType>
                                                                                                                                                                                                    ) => any;
                                                                                                                                                                                                    • Call the dataProvider.getList() method and return the resolved result as well as the loading state. The return from useInfiniteGetList is equivalent to the return from react-hook form useInfiniteQuery.

                                                                                                                                                                                                      Parameter resource

                                                                                                                                                                                                      The resource name, e.g. 'posts'

                                                                                                                                                                                                      Parameter params

                                                                                                                                                                                                      The getList parameters { pagination, sort, filter, meta }

                                                                                                                                                                                                      Parameter options

                                                                                                                                                                                                      Options object to pass to the queryClient. May include side effects to be executed upon success or failure, e.g. { onSuccess: () => { fetchNextPage(); } }

                                                                                                                                                                                                      Params params.pagination The request pagination { page, perPage }, e.g. { page: 1, perPage: 10 } params.sort The request sort { field, order }, e.g. { field: 'id', order: 'DESC' } params.filter The request filters, e.g. { title: 'hello, world' } params.meta Optional meta parameters

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      The current request state. Destructure as { data, total, error, isPending, isSuccess, hasNextPage, fetchNextPage }.

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useInfiniteGetList } from 'react-admin';

                                                                                                                                                                                                      const LatestNews = () => { const { data, total, isPending, error, hasNextPage, fetchNextPage } = useInfiniteGetList( 'posts', { pagination: { page: 1, perPage: 10 }, sort: { field: 'published_at', order: 'DESC' } } ); if (isPending) { return ; } if (error) { return ERROR; } return ( <> {data?.pages.map(page => { return page.data.map(post => ( <li key={post.id}>{post.title} )); })} <button disabled={!hasNextPage} onClick={() => fetchNextPage()}> Fetch next page </> ); };

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • https://tanstack.com/query/v5/docs/react/reference/useInfiniteQuery

                                                                                                                                                                                                        This hook will return the cached result when called a second time with the same parameters, until the response arrives.

                                                                                                                                                                                                    function useInfiniteListController

                                                                                                                                                                                                    useInfiniteListController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                    props?: InfiniteListControllerProps<RecordType>
                                                                                                                                                                                                    ) => InfiniteListControllerResult<RecordType>;
                                                                                                                                                                                                    • Prepare data for the InfiniteList view

                                                                                                                                                                                                      Parameter props

                                                                                                                                                                                                      The props passed to the InfiniteList component.

                                                                                                                                                                                                      {Object} controllerProps Fetched and computed data for the List view

                                                                                                                                                                                                      Example 1

                                                                                                                                                                                                      import { useInfiniteListController } from 'react-admin'; import ListView from './ListView';

                                                                                                                                                                                                      const MyList = props => { const controllerProps = useInfiniteListController(props); return <ListView {...controllerProps} {...props} />; }

                                                                                                                                                                                                    function useInfinitePaginationContext

                                                                                                                                                                                                    useInfinitePaginationContext: () => InfinitePaginationContextValue;
                                                                                                                                                                                                    • Hook to read the infinite pagination callbacks from the InfinitePaginationContext.

                                                                                                                                                                                                      Must be used within a <InfinitePaginationContext.Provider> (e.g. as a descendent of or ).

                                                                                                                                                                                                      {Object} InfinitePaginationContextValue {Function} fetchNextPage a callback to fetch the next page {Function} fetchPreviousPage a callback to fetch the previous page

                                                                                                                                                                                                      Returns

                                                                                                                                                                                                      {InfinitePaginationContextValue} infinite pagination callbacks

                                                                                                                                                                                                      See Also

                                                                                                                                                                                                      • useInfiniteListController for how the callbacks are built

                                                                                                                                                                                                    function useInput

                                                                                                                                                                                                    useInput: <ValueType = any>(props: any) => UseInputValue;

                                                                                                                                                                                                      function useIsDataLoaded

                                                                                                                                                                                                      useIsDataLoaded: (
                                                                                                                                                                                                      queryKey: any,
                                                                                                                                                                                                      options?: { enabled?: boolean | undefined }
                                                                                                                                                                                                      ) => boolean;
                                                                                                                                                                                                      • Check if react-query has already fetched data for a query key.

                                                                                                                                                                                                        This hook is reactive.

                                                                                                                                                                                                        Returns

                                                                                                                                                                                                        {boolean} true if the data is loaded, false otherwise

                                                                                                                                                                                                        Example 1

                                                                                                                                                                                                        const isCustomerLoaded = useIsDataLoaded(['customers', 'getOne', { id: customerId }]);

                                                                                                                                                                                                      function useIsMounted

                                                                                                                                                                                                      useIsMounted: () => React.MutableRefObject<boolean>;

                                                                                                                                                                                                        function useList

                                                                                                                                                                                                        useList: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                        props: UseListOptions<RecordType>
                                                                                                                                                                                                        ) => UseListValue<RecordType>;
                                                                                                                                                                                                        • Handle filtering, sorting and pagination on local data.

                                                                                                                                                                                                          Returns the data and callbacks expected by .

                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {RaRecord[]} props.data An array of records

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Boolean} props.isFetching: Optional. A boolean indicating whether the data is being loaded

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Boolean} props.isLoading: Optional. A boolean indicating whether the data has been loaded at least once

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Error | String} props.error: Optional. The error if any occurred while loading the data

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Object} props.filter: Optional. An object containing the filters applied on the data

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Number} props.page: Optional. The initial page index

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {Number} props.perPage: Optional. The initial page size

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {SortPayload} props.sort: Optional. The initial sort (field and order)

                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                          {filterCallback} prop.filterCallback Optional. A function that allows you to make a custom filter

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          const data = [ { id: 1, name: 'Arnold' }, { id: 2, name: 'Sylvester' }, { id: 3, name: 'Jean-Claude' }, ]

                                                                                                                                                                                                          const MyComponent = () => { const listContext = useList({ data }); return ( <ListContextProvider value={listContext}> ); };

                                                                                                                                                                                                        function useListContext

                                                                                                                                                                                                        useListContext: <
                                                                                                                                                                                                        RecordType extends RaRecord<Identifier> = any
                                                                                                                                                                                                        >() => ListControllerResult<RecordType>;
                                                                                                                                                                                                        • Hook to read the list controller props from the ListContext.

                                                                                                                                                                                                          Used within a (e.g. as a descendent of ).

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {ListControllerResult} list controller props

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          // custom list view

                                                                                                                                                                                                          import { useListContext } from 'react-admin';

                                                                                                                                                                                                          const MyList = () => { const { data, isPending } = useListContext(); if (isPending) { return <>Loading...</>; } return ( {data.map(record => ( <li key={record.id}>{record.name} ))} ); }

                                                                                                                                                                                                          Example 2

                                                                                                                                                                                                          // custom pagination

                                                                                                                                                                                                          import { useListContext } from 'react-admin'; import { Button, Toolbar } from '@mui/material'; import ChevronLeft from '@mui/icons-material/ChevronLeft'; import ChevronRight from '@mui/icons-material/ChevronRight';

                                                                                                                                                                                                          const PrevNextPagination = () => { const { page, perPage, total, setPage } = useListContext(); const nbPages = Math.ceil(total / perPage) || 1; return ( nbPages > 1 && {page > 1 && <Button color="primary" key="prev" onClick={() => setPage(page - 1)}> Prev } {page !== nbPages && <Button color="primary" key="next" onClick={() => setPage(page + 1)}> Next } ); }

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useListController for how it is filled

                                                                                                                                                                                                        function useListContextWithProps

                                                                                                                                                                                                        useListContextWithProps: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                        props?: any
                                                                                                                                                                                                        ) => Partial<ListControllerResult<RecordType>>;
                                                                                                                                                                                                        • Hook to read the list controller props from the ListContext.

                                                                                                                                                                                                          Mostly used within a <ListContext.Provider> (e.g. as a descendent of or ).

                                                                                                                                                                                                          But you can also use it without a <ListContext.Provider>. In this case, it is up to you to pass all the necessary props (see the list below).

                                                                                                                                                                                                          The given props will take precedence over context values.

                                                                                                                                                                                                          {Object} ListControllerProps {Object} data an array of the list records, e.g. [{ id: 123, title: 'hello world' }, { ... }] {integer} total the total number of results for the current filters, excluding pagination. Useful to build the pagination controls. e.g. 23 {boolean} isFetching boolean that is true on mount, and false once the data was fetched {boolean} isLoading boolean that is false until the data is available {integer} page the current page. Starts at 1 {Function} setPage a callback to change the page, e.g. setPage(3) {integer} perPage the number of results per page. Defaults to 25 {Function} setPerPage a callback to change the number of results per page, e.g. setPerPage(25) {Object} sort a sort object { field, order }, e.g. { field: 'date', order: 'DESC' } {Function} setSort a callback to change the sort, e.g. setSort({ field : 'name', order: 'ASC' }) {Object} filterValues a dictionary of filter values, e.g. { title: 'lorem', nationality: 'fr' } {Function} setFilters a callback to update the filters, e.g. setFilters(filters, displayedFilters) {Object} displayedFilters a dictionary of the displayed filters, e.g. { title: true, nationality: true } {Function} showFilter a callback to show one of the filters, e.g. showFilter('title', defaultValue) {Function} hideFilter a callback to hide one of the filters, e.g. hideFilter('title') {Array} selectedIds an array listing the ids of the selected rows, e.g. [123, 456] {Function} onSelect callback to change the list of selected rows, e.g. onSelect([456, 789]) {Function} onToggleItem callback to toggle the selection of a given record based on its id, e.g. onToggleItem(456) {Function} onUnselectItems callback to clear the selection, e.g. onUnselectItems(); {string} defaultTitle the translated title based on the resource, e.g. 'Posts' {string} resource the resource name, deduced from the location. e.g. 'posts'

                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                          Props passed to the useListContext hook

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {ListControllerResult} list controller props

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useListController for how it is filled

                                                                                                                                                                                                        function useListController

                                                                                                                                                                                                        useListController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                        props?: ListControllerProps<RecordType>
                                                                                                                                                                                                        ) => ListControllerResult<RecordType>;
                                                                                                                                                                                                        • Prepare data for the List view

                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                          The props passed to the List component.

                                                                                                                                                                                                          {Object} controllerProps Fetched and computed data for the List view

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useListController } from 'react-admin'; import ListView from './ListView';

                                                                                                                                                                                                          const MyList = props => { const controllerProps = useListController(props); return <ListView {...controllerProps} {...props} />; }

                                                                                                                                                                                                        function useListFilterContext

                                                                                                                                                                                                        useListFilterContext: () => ListFilterContextValue;
                                                                                                                                                                                                        • Hook to read the list props from the ListFilterContext.

                                                                                                                                                                                                          Must be used within a .

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {ListFilterContextValue} list controller props

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useListController for how it is filled

                                                                                                                                                                                                        function useListPaginationContext

                                                                                                                                                                                                        useListPaginationContext: () => ListPaginationContextValue;
                                                                                                                                                                                                        • Hook to read the list pagination controller props from the ListPaginationContext.

                                                                                                                                                                                                          Must be used within a (e.g. as a descendent of or ).

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {ListPaginationContextValue} list controller props

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useListController for how it is filled

                                                                                                                                                                                                        function useListParams

                                                                                                                                                                                                        useListParams: ({
                                                                                                                                                                                                        debounce,
                                                                                                                                                                                                        disableSyncWithLocation,
                                                                                                                                                                                                        filterDefaultValues,
                                                                                                                                                                                                        perPage,
                                                                                                                                                                                                        resource,
                                                                                                                                                                                                        sort,
                                                                                                                                                                                                        storeKey,
                                                                                                                                                                                                        }: ListParamsOptions) => [Parameters, Modifiers];
                                                                                                                                                                                                        • Get the list parameters (page, sort, filters) and modifiers.

                                                                                                                                                                                                          These parameters are merged from 3 sources: - the query string from the URL - the params stored in the state (from previous navigation) - the options passed to the hook (including the filter defaultValues)

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {Array} A tuple [parameters, modifiers]. Destructure as [ { page, perPage, sort, order, filter, filterValues, displayedFilters, requestSignature }, { setFilters, hideFilter, showFilter, setPage, setPerPage, setSort } ]

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          const [listParams, listParamsActions] = useListParams({ resource: 'posts', location: location // From react-router. Injected to your component by react-admin inside a List filterDefaultValues: { published: true }, sort: { field: 'published_at', order: 'DESC' }, perPage: 25 });

                                                                                                                                                                                                          const { page, perPage, sort, order, filter, filterValues, displayedFilters, requestSignature } = listParams;

                                                                                                                                                                                                          const { setFilters, hideFilter, showFilter, setPage, setPerPage, setSort, } = listParamsActions;

                                                                                                                                                                                                        function useListSortContext

                                                                                                                                                                                                        useListSortContext: () => ListSortContextValue;
                                                                                                                                                                                                        • Hook to read the list sort controller props from the ListSortContext.

                                                                                                                                                                                                          Must be used within a (e.g. as a descendent of or ).

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {ListSortContextValue} list controller props

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useListController for how it is filled

                                                                                                                                                                                                        function useLoading

                                                                                                                                                                                                        useLoading: () => boolean;
                                                                                                                                                                                                        • Get the state of the dataProvider connection.

                                                                                                                                                                                                          Returns true if a query or a mutation is pending.

                                                                                                                                                                                                          Custom implementation because react-query's useIsFetching and useIsMutating render each time the number of active queries changes, which is too often.

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useIsFetching

                                                                                                                                                                                                          • useIsMutating

                                                                                                                                                                                                        function useLocale

                                                                                                                                                                                                        useLocale: () => string;
                                                                                                                                                                                                        • Get the current locale

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLocale } from 'react-admin';

                                                                                                                                                                                                          const availableLanguages = { en: 'English', fr: 'Fran├žais', } const CurrentLanguage = () => { const locale = useLocale(); return {availableLanguages[locale]}; }

                                                                                                                                                                                                        function useLocales

                                                                                                                                                                                                        useLocales: (options?: UseLocalesOptions) => { locale: string; name: string }[];
                                                                                                                                                                                                        • A hook that gets the available locales from the i18nProvider.

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLocales } from 'react-admin';

                                                                                                                                                                                                          const LocaleSelector = () => { const locales = useLocales(); const [currentLocale, setCurrentLocale] = useLocaleState();

                                                                                                                                                                                                          return ( <select onChange={event => setCurrentLocale(event.target.value)}> {locales.map(locale => ( <option key={locale.locale} value={locale.locale}> {locale.name} )} ); }

                                                                                                                                                                                                        function useLocaleState

                                                                                                                                                                                                        useLocaleState: () => import('../store/useStore').useStoreResult<string>;
                                                                                                                                                                                                        • Get the current locale and the ability to change it

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLocaleState } from 'react-admin';

                                                                                                                                                                                                          const availableLanguages = { en: 'English', fr: 'Fran├žais', } const LocaleSwitcher = () => { const [locale, setLocale] = useLocaleState(); return ( Language <Button disabled={locale === 'fr'} onClick={() => setLocale('fr')}> English <Button disabled={locale === 'en'} onClick={() => setLocale('en')}> French ); };

                                                                                                                                                                                                        function useLogin

                                                                                                                                                                                                        useLogin: () => Login;
                                                                                                                                                                                                        • Get a callback for calling the authProvider.login() method and redirect to the previous authenticated page (or the home page) on success.

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {Function} login callback

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLogin } from 'react-admin';

                                                                                                                                                                                                          const LoginButton = () => { const [loading, setLoading] = useState(false); const login = useLogin(); const handleClick = { setLoading(true); login({ username: 'john', password: 'p@ssw0rd' }, '/posts') .then(() => setLoading(false)); } return <button onClick={handleClick}>Login; }

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useAuthProvider

                                                                                                                                                                                                        function useLogout

                                                                                                                                                                                                        useLogout: () => Logout;
                                                                                                                                                                                                        • Get a callback for calling the authProvider.logout() method, redirect to the login page, and clear the store.

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {Function} logout callback

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLogout } from 'react-admin';

                                                                                                                                                                                                          const LogoutButton = () => { const logout = useLogout(); const handleClick = () => logout(); return <button onClick={handleClick}>Logout; }

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useAuthProvider

                                                                                                                                                                                                        function useLogoutIfAccessDenied

                                                                                                                                                                                                        useLogoutIfAccessDenied: () => LogoutIfAccessDenied;
                                                                                                                                                                                                        • Returns a callback used to call the authProvider.checkError() method and an error from the dataProvider. If the authProvider rejects the call, the hook logs the user out and shows a logged out notification.

                                                                                                                                                                                                          Used in the useDataProvider hook to check for access denied responses (e.g. 401 or 403 responses) and trigger a logout.

                                                                                                                                                                                                          Returns

                                                                                                                                                                                                          {Function} logoutIfAccessDenied callback

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          import { useLogoutIfAccessDenied, useNotify, DataProviderContext } from 'react-admin';

                                                                                                                                                                                                          const FetchRestrictedResource = () => { const dataProvider = useContext(DataProviderContext); const logoutIfAccessDenied = useLogoutIfAccessDenied(); const notify = useNotify() useEffect(() => { dataProvider.getOne('secret', { id: 123 }) .catch(error => { logoutIfAccessDenied(error); notify('server error', { type: 'error' }); }) }, []); // ... }

                                                                                                                                                                                                          See Also

                                                                                                                                                                                                          • useLogout

                                                                                                                                                                                                          • useDataProvider

                                                                                                                                                                                                        function useMutationMiddlewares

                                                                                                                                                                                                        useMutationMiddlewares: <
                                                                                                                                                                                                        MutateFunc extends (...args: any[]) => any = (...args: any[]) => any
                                                                                                                                                                                                        >() => UseMutationMiddlewaresResult<MutateFunc>;
                                                                                                                                                                                                        • Internal hook used to handle mutation middlewares.

                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                          // We have a form creating an order for a new customer. // The form contains the customer fields in addition to the order fields // but they should be saved as a new customer resource record // and the order should only reference this new customer type Order = { id: string; reference: string }; type OrderCreateFormData = { id: string; reference: string; customer: Customer }; type Customer = { id: string; email: string; firstName: string; lastName: string };

                                                                                                                                                                                                          const CustomerForm = props => { const [createCustomer] = useCreate(); const middleware: Middleware<UseCreateResult[0]> = useCallback(async (resource, params, next) => { const { data } = params; const { user, ...orderData } = data; const { data = newCustomer } = await createCustomer('customers', { data: user }); const orderDataWithCustomer = { ...orderData, customerId: newCustomer.id }; next(resource, { data: orderDataWithCustomer }); }, [createCustomer]); useRegisterMutationMiddleware(middleware);

                                                                                                                                                                                                          return ( <> </> ); }

                                                                                                                                                                                                        function useNotificationContext

                                                                                                                                                                                                        useNotificationContext: () => import('./NotificationContext').NotificationContextType;

                                                                                                                                                                                                          function useNotify

                                                                                                                                                                                                          useNotify: () => (
                                                                                                                                                                                                          message: string | ReactNode,
                                                                                                                                                                                                          options?: NotificationOptions & { type?: NotificationType }
                                                                                                                                                                                                          ) => void;
                                                                                                                                                                                                          • Hook for Notification Side Effect

                                                                                                                                                                                                            Example 1

                                                                                                                                                                                                            const notify = useNotify(); // simple message (info level) notify('Level complete'); // specify level notify('A problem occurred', { type: 'error' }) // pass arguments to the translation function notify('Deleted %{count} elements', { type: 'info', messageArgs: { smart_count: 23 } }) // show the action as undoable in the notification notify('Post renamed', { type: 'info', undoable: true })

                                                                                                                                                                                                          function useNotifyIsFormInvalid

                                                                                                                                                                                                          useNotifyIsFormInvalid: (control?: Control, enabled?: boolean) => void;
                                                                                                                                                                                                          • This hook display an error message on submit in Form and SaveButton.

                                                                                                                                                                                                            We can't do the form validity check in the form submit handler as the form state may not have been updated yet when onSubmit validation mode is enabled or when the form hasn't been touched at all.

                                                                                                                                                                                                          function useOptionalSourceContext

                                                                                                                                                                                                          useOptionalSourceContext: () => SourceContextValue | undefined;

                                                                                                                                                                                                            function usePaginationState

                                                                                                                                                                                                            usePaginationState: (initialPagination?: {
                                                                                                                                                                                                            perPage?: number;
                                                                                                                                                                                                            page?: number;
                                                                                                                                                                                                            }) => PaginationHookResult;
                                                                                                                                                                                                            • Hooks to provide pagination state (page and perPage)

                                                                                                                                                                                                              Parameter initialPagination

                                                                                                                                                                                                              the initial value per page

                                                                                                                                                                                                              Returns

                                                                                                                                                                                                              {PaginationHookResult} The pagination props

                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                              const { page, setPage, perPage, setPerPage } = usePagination(initialPerPage);

                                                                                                                                                                                                            function usePermissions

                                                                                                                                                                                                            usePermissions: <PermissionsType = any, ErrorType = Error>(
                                                                                                                                                                                                            params?: {},
                                                                                                                                                                                                            queryParams?: UsePermissionsOptions<PermissionsType, ErrorType>
                                                                                                                                                                                                            ) => any;
                                                                                                                                                                                                            • Hook for getting user permissions

                                                                                                                                                                                                              Calls the authProvider.getPermissions() method using react-query. If the authProvider returns a rejected promise, returns empty permissions.

                                                                                                                                                                                                              The return value updates according to the request state:

                                                                                                                                                                                                              - start: { isPending: true } - success: { permissions: [any], isPending: false } - error: { error: [error from provider], isPending: false }

                                                                                                                                                                                                              Useful to enable features based on user permissions

                                                                                                                                                                                                              Parameter params

                                                                                                                                                                                                              Any params you want to pass to the authProvider

                                                                                                                                                                                                              Returns

                                                                                                                                                                                                              The current auth check state. Destructure as { permissions, error, isPending, refetch }.

                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                              import { usePermissions } from 'react-admin';

                                                                                                                                                                                                              const PostDetail = () => { const { isPending, permissions } = usePermissions(); if (!isPending && permissions == 'editor') { return } else { return } };

                                                                                                                                                                                                            function usePickFilterContext

                                                                                                                                                                                                            usePickFilterContext: (context: ListControllerResult) => ListFilterContextValue;

                                                                                                                                                                                                              function usePickPaginationContext

                                                                                                                                                                                                              usePickPaginationContext: (
                                                                                                                                                                                                              context: ListControllerResult
                                                                                                                                                                                                              ) => ListPaginationContextValue;

                                                                                                                                                                                                                function usePickSaveContext

                                                                                                                                                                                                                usePickSaveContext: <
                                                                                                                                                                                                                ContextType extends SaveContextValue<
                                                                                                                                                                                                                any,
                                                                                                                                                                                                                (...args: any[]) => any
                                                                                                                                                                                                                > = SaveContextValue<any, (...args: any[]) => any>
                                                                                                                                                                                                                >(
                                                                                                                                                                                                                context: ContextType
                                                                                                                                                                                                                ) => SaveContextValue;
                                                                                                                                                                                                                • This hook extracts the save, saving and mutationMode properties from either the CreateContext or EditContext. This ensures the SaveContext doesn't rerender when those two contexts have other properties changes.

                                                                                                                                                                                                                function usePickSortContext

                                                                                                                                                                                                                usePickSortContext: (context: ListControllerResult) => ListSortContextValue;

                                                                                                                                                                                                                  function usePreference

                                                                                                                                                                                                                  usePreference: <T = any>(key?: string, defaultValue?: T) => useStoreResult<T>;
                                                                                                                                                                                                                  • Get a preference value from the store

                                                                                                                                                                                                                    Relies on the store, using a key namespaced with the preference key from the PreferenceKeyContext

                                                                                                                                                                                                                    Example 1

                                                                                                                                                                                                                    // when used inside a PreferenceKeyContext of value 'my-app' const [theme, setTheme] = usePreference('theme', 'light'); // this is equivalent to const [theme, setTheme] = useStore('my-app.theme', 'light');

                                                                                                                                                                                                                  function usePreferenceInput

                                                                                                                                                                                                                  usePreferenceInput: (
                                                                                                                                                                                                                  key?: string,
                                                                                                                                                                                                                  defaultValue?: any
                                                                                                                                                                                                                  ) => {
                                                                                                                                                                                                                  value: any;
                                                                                                                                                                                                                  onChange: (event: any) => void;
                                                                                                                                                                                                                  onBlur: () => void;
                                                                                                                                                                                                                  onKeyDown: (event: any) => void;
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  • Get the props for a preference input that changes the value on blur

                                                                                                                                                                                                                    Relies on usePreference, so it's using the PreferenceKeyContext

                                                                                                                                                                                                                    Example 1

                                                                                                                                                                                                                    const FontSizePreferenceInput = () => { const field = usePreferenceInput('ui.font.size', 10); return ( Font size <input id="font-size" {...field} /> ); }

                                                                                                                                                                                                                  function usePreferenceKey

                                                                                                                                                                                                                  usePreferenceKey: () => string | null;

                                                                                                                                                                                                                    function usePreferencesEditor

                                                                                                                                                                                                                    usePreferencesEditor: () => PreferencesEditorContextValue;

                                                                                                                                                                                                                      function usePrevious

                                                                                                                                                                                                                      usePrevious: (value: any) => undefined;

                                                                                                                                                                                                                        function usePrevNextController

                                                                                                                                                                                                                        usePrevNextController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                                        props: UsePrevNextControllerProps<RecordType>
                                                                                                                                                                                                                        ) => UsePrevNextControllerResult;
                                                                                                                                                                                                                        • A hook used to fetch the previous and next record identifiers for a given record and resource.

                                                                                                                                                                                                                          It fetches the list of records according to the filters and the sort order configured in the list, and merges the filters and the sorting order passed as props.

                                                                                                                                                                                                                          usePrevNextController can be used anywhere a record context is provided (often inside a <Show> or <Edit> component).

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          Simple usage

                                                                                                                                                                                                                          import { usePrevNextControllerProps } from 'ra-core'; const { hasPrev, hasNext, prevPath, nextPath, index, total, error, isPending, } = usePrevNextController(props);

                                                                                                                                                                                                                          Example 2

                                                                                                                                                                                                                          Custom PrevNextButton

                                                                                                                                                                                                                          import { UsePrevNextControllerProps, useTranslate } from 'ra-core'; import NavigateBefore from '@mui/icons-material/NavigateBefore'; import NavigateNext from '@mui/icons-material/NavigateNext'; import ErrorIcon from '@mui/icons-material/Error'; import { Link } from 'react-router-dom'; import { CircularProgress, IconButton } from '@mui/material';

                                                                                                                                                                                                                          const MyPrevNextButtons = props => { const { hasPrev, hasNext, nextPath, prevPath, index, total, error, isPending, } = usePrevNextController(props);

                                                                                                                                                                                                                          const translate = useTranslate();

                                                                                                                                                                                                                          if (isPending) { return <CircularProgress size={14} />; }

                                                                                                                                                                                                                          if (error) { return ( <ErrorIcon color="error" fontSize="small" titleAccess="error" aria-errormessage={error.message} /> ); }

                                                                                                                                                                                                                          return ( <IconButton component={hasPrev ? Link : undefined} to={navigateToPrev} aria-label={translate('ra.navigation.previous')} disabled={!hasPrev} > {typeof index === 'number' && ( {index + 1} / {total} )} <IconButton component={hasNext ? Link : undefined} to={navigateToNext} aria-label={translate('ra.navigation.next')} disabled={!hasNext} > ); };

                                                                                                                                                                                                                        function useRecordContext

                                                                                                                                                                                                                        useRecordContext: <
                                                                                                                                                                                                                        RecordType extends
                                                                                                                                                                                                                        | RaRecord<Identifier>
                                                                                                                                                                                                                        | Omit<RaRecord<Identifier>, 'id'> = RaRecord<Identifier>
                                                                                                                                                                                                                        >(
                                                                                                                                                                                                                        props?: UseRecordContextParams<RecordType>
                                                                                                                                                                                                                        ) => RecordType;
                                                                                                                                                                                                                        • Hook to read the record from a RecordContext.

                                                                                                                                                                                                                          Must be used within a such as provided by the (e.g. as a descendent of or ) or within a (e.g. as a descendent of or )

                                                                                                                                                                                                                          Returns

                                                                                                                                                                                                                          {RaRecord} A record object

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          // basic usage

                                                                                                                                                                                                                          import { useRecordContext } from 'ra-core';

                                                                                                                                                                                                                          const TitleField = () => { const record = useRecordContext(); return {record && record.title}; };

                                                                                                                                                                                                                          Example 2

                                                                                                                                                                                                                          // allow record override via props

                                                                                                                                                                                                                          import { useRecordContext } from 'ra-core';

                                                                                                                                                                                                                          const TitleField = (props) => { const record = useRecordContext(props); return {record && record.title}; }; render(<TextField record={record} />);

                                                                                                                                                                                                                        function useRecordSelection

                                                                                                                                                                                                                        useRecordSelection: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                                        args: UseRecordSelectionArgs
                                                                                                                                                                                                                        ) => UseRecordSelectionResult<RecordType>;
                                                                                                                                                                                                                        • Get the list of selected items for a resource, and callbacks to change the selection

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          args.resource The resource name, e.g. 'posts'

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          args.disableSyncWithStore Controls the selection syncronization with the store

                                                                                                                                                                                                                          Returns

                                                                                                                                                                                                                          {Object} Destructure as [selectedIds, { select, toggle, clearSelection }].

                                                                                                                                                                                                                        function useRedirect

                                                                                                                                                                                                                        useRedirect: () => (
                                                                                                                                                                                                                        redirectTo: RedirectionSideEffect,
                                                                                                                                                                                                                        resource?: string,
                                                                                                                                                                                                                        id?: Identifier,
                                                                                                                                                                                                                        data?: Partial<RaRecord>,
                                                                                                                                                                                                                        state?: object
                                                                                                                                                                                                                        ) => void;
                                                                                                                                                                                                                        • Hook for Redirection Side Effect

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          const redirect = useRedirect(); // redirect to list view redirect('list', 'posts'); // redirect to edit view redirect('edit', 'posts', 123); // redirect to edit view with state data redirect('edit', 'comments', 123, {}, { record: { post_id: record.id } }); // do not redirect redirect(false); // redirect to the result of a function redirect((resource, id, data) => ...)

                                                                                                                                                                                                                        function useReference

                                                                                                                                                                                                                        useReference: <RecordType extends RaRecord<Identifier> = RaRecord<Identifier>>({
                                                                                                                                                                                                                        reference,
                                                                                                                                                                                                                        id,
                                                                                                                                                                                                                        options,
                                                                                                                                                                                                                        }: UseReferenceProps<RecordType>) => UseReferenceResult<RecordType>;
                                                                                                                                                                                                                        • Fetch reference record, and return it when available

                                                                                                                                                                                                                          The reference prop should be the name of one of the components added as child.

                                                                                                                                                                                                                          Parameter option

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} option.reference The linked resource name

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} option.id The id of the reference

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {Object} option.options Options passed to the dataProvider

                                                                                                                                                                                                                          Returns

                                                                                                                                                                                                                          {UseReferenceResult} The reference record

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          const { isLoading, referenceRecord } = useReference({ id: 7, reference: 'users', });

                                                                                                                                                                                                                        function useReferenceArrayFieldController

                                                                                                                                                                                                                        useReferenceArrayFieldController: <
                                                                                                                                                                                                                        RecordType extends RaRecord<Identifier> = RaRecord<Identifier>,
                                                                                                                                                                                                                        ReferenceRecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                                                                        >(
                                                                                                                                                                                                                        props: UseReferenceArrayFieldControllerParams<RecordType, ReferenceRecordType>
                                                                                                                                                                                                                        ) => ListControllerResult;
                                                                                                                                                                                                                        • Hook that fetches records from another resource specified by an array of *ids* in current record.

                                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {Object} props.record The current resource record

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.reference The linked resource name

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.resource The current resource name

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.source The key of the linked resource identifier

                                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                                          Returns

                                                                                                                                                                                                                          {ListControllerResult} The reference props

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          const { data, error, isFetching, isPending } = useReferenceArrayFieldController({ record: { referenceIds: ['id1', 'id2']}; reference: 'reference'; resource: 'resource'; source: 'referenceIds'; });

                                                                                                                                                                                                                        function useReferenceArrayInputController

                                                                                                                                                                                                                        useReferenceArrayInputController: <
                                                                                                                                                                                                                        RecordType extends RaRecord<Identifier> = any
                                                                                                                                                                                                                        >(
                                                                                                                                                                                                                        props: UseReferenceArrayInputParams<RecordType>
                                                                                                                                                                                                                        ) => ChoicesContextValue<RecordType>;
                                                                                                                                                                                                                        • Prepare data for the ReferenceArrayInput components

                                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {Object} props.record The current resource record

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.reference The linked resource name

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.resource The current resource name

                                                                                                                                                                                                                          Parameter

                                                                                                                                                                                                                          {string} props.source The key of the linked resource identifier

                                                                                                                                                                                                                          Parameter props

                                                                                                                                                                                                                          {Object} controllerProps Fetched data and callbacks for the ReferenceArrayInput components

                                                                                                                                                                                                                          Example 1

                                                                                                                                                                                                                          const { allChoices, availableChoices, selectedChoices, error, isFetching, isLoading, isPending } = useReferenceArrayInputController({ record: { referenceIds: ['id1', 'id2']}; reference: 'reference'; resource: 'resource'; source: 'referenceIds'; });

                                                                                                                                                                                                                        function useReferenceFieldContext

                                                                                                                                                                                                                        useReferenceFieldContext: () => UseReferenceFieldControllerResult<
                                                                                                                                                                                                                        import('../..').RaRecord<import('../..').Identifier>
                                                                                                                                                                                                                        >;

                                                                                                                                                                                                                          function useReferenceFieldController

                                                                                                                                                                                                                          useReferenceFieldController: <
                                                                                                                                                                                                                          ReferenceRecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                                                                          >(
                                                                                                                                                                                                                          options: UseReferenceFieldControllerOptions<ReferenceRecordType>
                                                                                                                                                                                                                          ) => UseReferenceFieldControllerResult<ReferenceRecordType>;

                                                                                                                                                                                                                            function useReferenceInputController

                                                                                                                                                                                                                            useReferenceInputController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                                            props: UseReferenceInputControllerParams
                                                                                                                                                                                                                            ) => ChoicesContextValue<RecordType>;
                                                                                                                                                                                                                            • A hook for choosing a reference record. Useful for foreign keys.

                                                                                                                                                                                                                              This hook fetches the possible values in the reference resource (using dataProvider.getList()), it returns the possible choices as the choices attribute.

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              const { choices, // the available reference resource } = useReferenceInputController({ input, // the input props resource: 'comments', reference: 'posts', source: 'post_id', });

                                                                                                                                                                                                                              The hook also allow to filter results. It returns a setFilters function. It uses the value to create a filter for the query. You can also add a permanentFilter to further filter the result:

                                                                                                                                                                                                                              Example 2

                                                                                                                                                                                                                              const { choices, // the available reference resource setFilter, } = useReferenceInputController({ input, // the input props resource: 'comments', reference: 'posts', source: 'post_id', permanentFilter: { author: 'john' }, });

                                                                                                                                                                                                                            function useReferenceManyFieldController

                                                                                                                                                                                                                            useReferenceManyFieldController: <
                                                                                                                                                                                                                            RecordType extends RaRecord<Identifier> = RaRecord<Identifier>,
                                                                                                                                                                                                                            ReferenceRecordType extends RaRecord<Identifier> = RaRecord<Identifier>
                                                                                                                                                                                                                            >(
                                                                                                                                                                                                                            props: UseReferenceManyFieldControllerParams<RecordType, ReferenceRecordType>
                                                                                                                                                                                                                            ) => ListControllerResult<ReferenceRecordType>;
                                                                                                                                                                                                                            • Fetch reference records, and return them when available

                                                                                                                                                                                                                              Uses dataProvider.getManyReference() internally.

                                                                                                                                                                                                                              Parameter props

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {string} props.reference The linked resource name. Required.

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {string} props.target The target resource key. Required.

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {Object} props.filter The filter applied on the recorded records list

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {number} props.page the page number

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {number} props.perPage the number of item per page

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {Object} props.record The current resource record

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {string} props.resource The current resource name

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {Object} props.sort the sort to apply to the referenced records

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {string} props.source The key of the linked resource identifier

                                                                                                                                                                                                                              Parameter

                                                                                                                                                                                                                              {UseQuery Options} props.queryOptions react-query options`

                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                              {ListControllerResult} The reference many props

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              // fetch the comments related to the current post const { isPending, data } = useReferenceManyFieldController({ reference: 'comments', target: 'post_id', record: { id: 123, title: 'hello, world' }, resource: 'posts', });

                                                                                                                                                                                                                            function useReferenceOneFieldController

                                                                                                                                                                                                                            useReferenceOneFieldController: <RecordType extends RaRecord<Identifier> = any>(
                                                                                                                                                                                                                            props: UseReferenceOneFieldControllerParams<RecordType>
                                                                                                                                                                                                                            ) => UseReferenceResult<RecordType>;
                                                                                                                                                                                                                            • Fetch a reference record in a one-to-one relationship, and return it when available

                                                                                                                                                                                                                              The reference prop should be the name of one of the components added as child.

                                                                                                                                                                                                                              Returns

                                                                                                                                                                                                                              {UseReferenceResult} The request state. Destructure as { referenceRecord, isPending, error }.

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              const { data, isPending, error } = useReferenceOneFieldController({ record: { id: 7, name: 'James Joyce'} reference: 'bios', target: 'author_id', });

                                                                                                                                                                                                                              {Object} UseReferenceOneFieldControllerParams {Object} props.record The current resource record {string} props.reference The linked resource name {string} props.target The target resource key {string} props.source The key current record identifier ('id' by default) {Object} props.sort The sort to apply to the referenced records {Object} props.filter The filter to apply to the referenced records

                                                                                                                                                                                                                            function useRefresh

                                                                                                                                                                                                                            useRefresh: () => () => void;
                                                                                                                                                                                                                            • Hook for triggering a page refresh. Returns a callback function.

                                                                                                                                                                                                                              The callback invalidates all queries and refetches the active ones. Any component depending on react-query data will be re-rendered.

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              const refresh = useRefresh(); const handleClick = () => { refresh(); };

                                                                                                                                                                                                                            function useRegisterMutationMiddleware

                                                                                                                                                                                                                            useRegisterMutationMiddleware: <
                                                                                                                                                                                                                            MutateFunc extends (...args: any[]) => any = (...args: any[]) => any
                                                                                                                                                                                                                            >(
                                                                                                                                                                                                                            callback: Middleware<MutateFunc>
                                                                                                                                                                                                                            ) => void;
                                                                                                                                                                                                                            • Internal hook that registers a middleware for the save function in the current SaveContext.

                                                                                                                                                                                                                              Parameter callback

                                                                                                                                                                                                                              The middleware function.

                                                                                                                                                                                                                            function useRemoveFromStore

                                                                                                                                                                                                                            useRemoveFromStore: (hookTimeKey?: string) => (key?: string) => void;
                                                                                                                                                                                                                            • Get a callback to remove an item from the store

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              import { useRemoveFromStore } from 'react-admin';

                                                                                                                                                                                                                              const ResetDatagridPrefs = () { const removeItem = useRemoveFromStore();

                                                                                                                                                                                                                              const handleClick = () => { removeItem('datagrid.prefs'); };

                                                                                                                                                                                                                              return <Button onClick={hancleClick}>Reset datagrid preferences; }

                                                                                                                                                                                                                            function useRemoveItemsFromStore

                                                                                                                                                                                                                            useRemoveItemsFromStore: (
                                                                                                                                                                                                                            hookTimeKeyPrefix?: string | null
                                                                                                                                                                                                                            ) => (keyPrefix?: string) => void;
                                                                                                                                                                                                                            • Get a callback to remove all item with a certain key prefix from the store

                                                                                                                                                                                                                              Example 1

                                                                                                                                                                                                                              import { useRemoveItemsFromStore } from 'react-admin';

                                                                                                                                                                                                                              const ResetDatagridPrefs = () { const removeItems = useRemoveItemsFromStore();

                                                                                                                                                                                                                              const handleClick = () => { removeItems('datagrid.prefs'); };

                                                                                                                                                                                                                              return <Button onClick={hancleClick}>Reset datagrid preferences; }

                                                                                                                                                                                                                            function useResetErrorBoundaryOnLocationChange

                                                                                                                                                                                                                            useResetErrorBoundaryOnLocationChange: (resetErrorBoundary: () => void) => void;
                                                                                                                                                                                                                            • A hook to use inside the component passed to FallbackComponent of react-error-boundary. It resets the error boundary state whenever the location changes

                                                                                                                                                                                                                              Parameter resetErrorBoundary

                                                                                                                                                                                                                            function useResetStore