|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: "The AutoPersistInStore Component" |
| 4 | +--- |
| 5 | + |
| 6 | +# `<AutoPersistInStore>` |
| 7 | + |
| 8 | +This [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" alt="React Admin Enterprise Edition icon" /> 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. |
| 9 | + |
| 10 | +<video controls autoplay playsinline muted loop> |
| 11 | + <source src="./img/AutoPersistInStore.mp4" type="video/mp4"/> |
| 12 | + Your browser does not support the video tag. |
| 13 | +</video> |
| 14 | + |
| 15 | +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. |
| 16 | + |
| 17 | +Saved data is not sent to the server. It is only persisted using the [store](./Store.md) and is removed when the user logs out. |
| 18 | + |
| 19 | +## Usage |
| 20 | + |
| 21 | +Add `<AutoPersistInStore>` inside a react-admin form (`<SimpleForm>`, `<TabbedForm>`, `<LongForm>`, etc.): |
| 22 | + |
| 23 | +```tsx |
| 24 | +import { AutoPersistInStore } from '@react-admin/ra-form-layout'; |
| 25 | +import { Edit, SimpleForm, TextInput } from 'react-admin'; |
| 26 | + |
| 27 | +const PostEdit = () => ( |
| 28 | + <Edit> |
| 29 | + <SimpleForm> |
| 30 | + <TextInput source="title" /> |
| 31 | + <TextInput source="teaser" /> |
| 32 | + <AutoPersistInStore /> |
| 33 | + </SimpleForm> |
| 34 | + </Edit> |
| 35 | +); |
| 36 | +``` |
| 37 | + |
| 38 | +The component will automatically save the form data in the store on unmount and reapply it when the form is mounted again. |
| 39 | + |
| 40 | +It works both on create and edit forms. |
| 41 | + |
| 42 | +## Props |
| 43 | + |
| 44 | +| Prop | Required | Type | Default | Description | |
| 45 | +| --------------------- | -------- | ---------- | -------------------------------------------------------- | ------------------------------------------------------------- | |
| 46 | +| `getStoreKey` | - | `function` | - | Function to use your own store key. | |
| 47 | +| `notificationMessage` | - | `string` | "Applied previous unsaved changes" | Notification message to inform users that their previously saved changes have been applied. | |
| 48 | + |
| 49 | +## `getStoreKey` |
| 50 | + |
| 51 | +To save the current form data in the [store](./useStoreContext.md), `<AutoPersistInStore>` uses the following store key: |
| 52 | + |
| 53 | +`ra-persist-[RESOURCE_NAME]-[RECORD_ID]` |
| 54 | + |
| 55 | +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"` |
| 56 | + |
| 57 | +You can override this key by passing a custom function as the `getStoreKey` prop. It expects two parameters: |
| 58 | + |
| 59 | +- `resource`: The current resource. |
| 60 | +- `record`: The current record if you are in an [edit context](./useEditContext.md). |
| 61 | + |
| 62 | +```tsx |
| 63 | +<AutoPersistInStore |
| 64 | + getStoreKey={ |
| 65 | + (resource: ResourceContextValue, record: RaRecord<Identifier> | undefined) => |
| 66 | + `my-custom-persist-key-${resource}-${record && record.hasOwnProperty('id') ? record.id : 'create'}` |
| 67 | + } |
| 68 | +/> |
| 69 | +``` |
| 70 | + |
| 71 | + |
| 72 | +## `notificationMessage` |
| 73 | + |
| 74 | +When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin informs users with a notification. |
| 75 | + |
| 76 | +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`). |
| 77 | + |
| 78 | +You can customize it with the `notificationMessage` prop: |
| 79 | + |
| 80 | +```tsx |
| 81 | +<AutoPersistInStore notificationMessage="Modifications applied" /> |
| 82 | +``` |
| 83 | + |
| 84 | +**Tip:** You can pass a translation key as well: |
| 85 | + |
| 86 | +```tsx |
| 87 | +<AutoPersistInStore notificationMessage="myroot.message.auto_persist_applied" /> |
| 88 | +``` |
0 commit comments