|
| 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 saves a form data in the store on unmount (e.g. when users leave the page) and reapplies it on mount. |
| 9 | +It's ideal to ensure users don't loose their already filled data in an edit or a create form when they navigate to another page. |
| 10 | + |
| 11 | +<video controls autoplay playsinline muted loop> |
| 12 | + <source src="./img/AutoPersistInStore.mp4" type="video/mp4"/> |
| 13 | + Your browser does not support the video tag. |
| 14 | +</video> |
| 15 | + |
| 16 | +## Usage |
| 17 | + |
| 18 | +Add `<AutoPersistInStore>` inside a react-admin form (`<SimpleForm>`, `<TabbedForm>`, `<LongForm>`, etc.): |
| 19 | + |
| 20 | +```tsx |
| 21 | +import { AutoPersistInStore } from '@react-admin/ra-form-layout'; |
| 22 | +import { Edit, SimpleForm, TextInput } from 'react-admin'; |
| 23 | + |
| 24 | +const PostEdit = () => ( |
| 25 | + <Edit> |
| 26 | + <SimpleForm> |
| 27 | + <TextInput source="title" /> |
| 28 | + <TextInput source="teaser" /> |
| 29 | + <AutoPersistInStore /> |
| 30 | + </SimpleForm> |
| 31 | + </Edit> |
| 32 | +); |
| 33 | +``` |
| 34 | + |
| 35 | +## Props |
| 36 | + |
| 37 | +| Prop | Required | Type | Default | Description | |
| 38 | +| --------------------- | -------- | ---------- | -------------------------------------------------------- | ------------------------------------------------------------- | |
| 39 | +| `getStoreKey` | - | `function` | - | Function to use your own store key. | |
| 40 | +| `notificationMessage` | - | `string` | `"ra-form-layout.` `auto_persist_ in_store` `.applied_changes"` | Notification message to inform users that their previously saved changes have been applied. | |
| 41 | + |
| 42 | +## `getStoreKey` |
| 43 | + |
| 44 | +To save the current form data in the [store](./useStoreContext.md), `<AutoPersistInStore>` uses a default key that can be overridden with the `getStoreKey` prop. |
| 45 | +It accepts a function with two parameters: |
| 46 | + |
| 47 | +- `resource`: The current resource. |
| 48 | +- `record`: The current record if you are in an [edit context](./useEditContext.md). |
| 49 | + |
| 50 | +```tsx |
| 51 | +<AutoPersistInStore |
| 52 | + getStoreKey={ |
| 53 | + (resource: ResourceContextValue, record: RaRecord<Identifier> | undefined) => |
| 54 | + `my-custom-persist-key-${resource}-${record && record.hasOwnProperty('id') ? record.id : 'create'}` |
| 55 | + } |
| 56 | +/> |
| 57 | +``` |
| 58 | + |
| 59 | +The default key is `ra-persist-YOUR_RESOURCE-RECORD_ID` (in case of a create form, the record `id` is replaced by `"create"`), e.g. `ra-persist-customers-5`. |
| 60 | + |
| 61 | +## `notificationMessage` |
| 62 | + |
| 63 | +When `<AutoPersistInStore>` component applies the changes from the store to a form, react-admin's inform users with a notification. You can customize it with the `notificationMessage` prop: |
| 64 | + |
| 65 | +```tsx |
| 66 | +<AutoPersistInStore notificationMessage="Modifications applied" /> |
| 67 | +``` |
| 68 | + |
| 69 | +**Tip:** You can pass a translation key as well: |
| 70 | + |
| 71 | +```tsx |
| 72 | +<AutoPersistInStore notificationMessage="myroot.message.auto_persist_applied" /> |
| 73 | +``` |
0 commit comments