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
| Property | Type | Description |
|---|---|---|
data | | The data returned by the update request. |
error | | The error returned by the update request. |
status ﹡ | | The status of the update request. |
elements | | The elements to display for each status. |