Skip to main content

onSave

Fires when pending changes pass validation and are ready to persist. On save the editor writes the changed fields back into the original object you passed to values (an in-place mutation via item setters). It does not persist anything beyond that - it has no knowledge of your storage, so writing the record to a backend is your code's responsibility. onSave is the signal that this happened.

With autoSave={true} it runs after each valid field change; with autoSave={false} it runs when a toolbar item with id: "save" is activated (which runs validation first). Use it to persist the edited record.

Usage​

onSave?: (ev: {
  changes: string[];
  values: Record<string, any>;
}) => void;
FieldTypeDescription
changesstring[]Changed field keys. Multi-field (keys) items report each real field key.
valuesRecord<string, any>Snapshot of the edited record with new values applied.

Example​

import { Editor, Willow } from "@svar-ui/react-editor";

const items = [{ comp: "text", key: "name", label: "Name" }];
const values = { name: "John Doe" };

export default function App() {
  return (
    <Willow>
      <Editor
        items={items}
        values={values}
        onSave={({ changes, values }) => console.log(changes, values)}
      />
    </Willow>
  );
}