Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Add documentation for <CheckForApplicationUpdate onNewVersionAvailable> #9437

Merged
merged 4 commits into from
Nov 13, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 43 additions & 7 deletions docs/CheckForApplicationUpdate.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,13 @@ export const App = () => (

`<CheckForApplicationUpdate>` accepts the following props:

| Prop | Required | Type | Default | Description |
| --------------- | -------- | -------- | ------------------ |-------------------------------------------------------------------- |
| `interval` | Optional | number | `3600000` (1 hour) | The interval in milliseconds between two checks |
| `disabled` | Optional | boolean | `false` in `production` mode | Whether the automatic check is disabled |
| `notification` | Optional | ReactElement | | The notification to display to the user when an update is available |
| `url` | Optional | string | current URL | The URL to download to check for code update |
| Prop | Required | Type | Default | Description |
| --------------- | -------- | -------------- | ------------------ |-------------------------------------------------------------------- |
| `interval` | Optional | `number` | `3600000` (1 hour) | The interval in milliseconds between two checks |
| `disabled` | Optional | `boolean` | `false` | Whether the automatic check is disabled |
| `notification` | Optional | `ReactElement` | | The notification to display to the user when an update is available |
| `onNewVersion Available` | Optional | `function` | | The effect to execute when a new version is detected. |
| `url` | Optional | `string` | Current URL | The URL to download to check for code update |

## `interval`

Expand Down Expand Up @@ -118,7 +119,42 @@ const MyLayout = ({ children, ...props }) => (
);
```

If you just want to customize the notification texts, including the button, check out the [Internationalization section](#internationalization).
If you want to customize the behavior when a new version is available, checkout the [`onNewVersionAvailable` section](#onnewversionavailable). If you just want to customize the notification texts, including the button, check out the [Internationalization section](#internationalization).

## `onNewVersionAvailable`

Advanced users who wish to customize the handling function other than just displaying a notification can leverage the `onNewVersionAvailable` prop:

```tsx
import { CheckForApplicationUpdate, useNotify } from "react-admin";

export const MyCheckForApplicationUpdate = () => {
const notify = useNotify();

const onNewVersionAvailable = () => {
// Perform a backup of user preference in localStorage in case bad things happen
const preference1 = localStorage.getItem("preference1");
const preference2 = localStorage.getItem("preference2");
const checkpointData = {
preference1,
preference2,
};
localStorage.setItem(
`checkpoint_${new Date().toISOString()}`,
JSON.stringify(checkpointData),
);

// Notify user
notify("New Version Ready to Update");
};

return (
<CheckForApplicationUpdate
onNewVersionAvailable={onNewVersionAvailable}
/>
);
};
```

## `url`

Expand Down