<AutoPersistInStore>

This Enterprise Edition component prevents data loss in forms by automatically saving the form data in the store when users navigate away from the page. When users return to the page, it reapplies the saved data to the form.

The temporary form data is only saved when the user navigates away from the page, and it is removed when the user submits the form or closes the tab. Users can opt out of the prefilling by clicking the “Cancel” button in the notification.

Saved data is not sent to the server. It is only persisted using the store and is removed when the user logs out.

Usage

Add <AutoPersistInStore> inside a react-admin form (<SimpleForm>, <TabbedForm>, <LongForm>, etc.):

import { AutoPersistInStore } from '@react-admin/ra-form-layout';
import { Edit, SimpleForm, TextInput } from 'react-admin';

const PostEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="title" />
            <TextInput source="teaser" />
            <AutoPersistInStore />
        </SimpleForm>
    </Edit>
);

The component will automatically save the form data in the store on unmount and reapply it when the form is mounted again.

It works both on create and edit forms.

Props

getStoreKey

To save the current form data in the store, <AutoPersistInStore> uses the following store key:

ra-persist-[RESOURCE_NAME]-[RECORD_ID]

For example, if you are editing a posts resource with the ID 123, the store key will be: ra-persist-posts-123. In case of a create form, the record ID is replaced by "create"

You can override this key by passing a custom function as the getStoreKey prop. It expects two parameters:

• resource: The current resource.
• record: The current record if you are in an edit context.

<AutoPersistInStore 
    getStoreKey={
        (resource: ResourceContextValue, record: RaRecord<Identifier> | undefined) =>
            `my-custom-persist-key-${resource}-${record && record.hasOwnProperty('id') ? record.id : 'create'}`
    }
/>

notificationMessage

When <AutoPersistInStore> component applies the changes from the store to a form, react-admin informs users with a notification.

The default notification message is ra-form-layout.auto_persist_in_store.applied_changes, which is translated using the i18n provider (the default English translation is Applied previous unsaved changes).

You can customize it with the notificationMessage prop:

<AutoPersistInStore notificationMessage="Modifications applied" />

Tip: You can pass a translation key as well:

<AutoPersistInStore notificationMessage="myroot.message.auto_persist_applied" />