Prevent data loss

You can prevent data loss due to accidentally closing or reloading a tab by using the preventDataLoss function.

Example

Try to change the value of the form and reload the page.

<script lang="ts">
  import { FormContent } from "@sjsf/form";
  import { preventDataLoss } from "@sjsf/form/prevent-data-loss.svelte";

  import { useCustomForm } from "@/components/custom-form";

  const form = useCustomForm({
    schema: { type: "string" },
  });

  preventDataLoss(form);
</script>

<FormContent bind:value={form.formValue} />

<button
  style="width: 100%; padding: 0.5rem;"
  onclick={() => {
    window.location.reload();
  }}
>
  Reload page
</button>