Skip to main content
Version: 4.xx.xx
Source Code

<AutoSaveIndicator />

<AutoSaveIndicator> component from Refine for Chakra UI can be used to communicate auto-save status to the user.

Good to know:

This component is an extended version of the <AutoSaveIndicator> component from Refine's core package. It provides a set of elements which align with Chakra UI's components and styling.

Usage

Simple usage is as follows:

import { AutoSaveIndicator, useForm } from "@refinedev/chakra-ui";

const MyComponent = () => {
const {
refineCore: { autoSaveProps },
} = useForm({
refineCoreProps: {
autoSave: {
enabled: true,
},
},
});

console.log(autoSaveProps);
/*
{
status: "success", // "loading" | "error" | "idle" | "success"
error: null, // HttpError | null
data: { ... }, // UpdateResponse | undefined,
}
*/

return <AutoSaveIndicator {...autoSaveProps} />;
};

API Reference

Properties

PropertyTypeDescription
data

UpdateResponse<BaseRecord>

The data returned by the update request.

error

HttpError | null

The error returned by the update request.

status

"loading" | "error" | "idle" | "success"

The status of the update request.

elements

Partial<Record<"loading"

"error"

"idle"

"success", ReactNode>>

The elements to display for each status.