Back to Refine

Ant Design Auto Save Indicator Component | UI Component in Refine v5

documentation/docs/ui-integrations/ant-design/components/auto-save-indicator/index.md

3.25.01000 B
Original Source

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

:::simple 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 Ant Design's components and styling.

:::

Usage

tsx
import { AutoSaveIndicator, useForm } from "@refinedev/antd";

const MyComponent = () => {
  const { 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

<PropsTable module="@refinedev/antd/AutoSaveIndicator" />