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 { Content, setFromContext } from "@sjsf/form";
  import { preventDataLoss } from "@sjsf/form/prevent-data-loss.svelte";

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

  const form = createCustomForm({
    schema: { type: "string" },
  });
  setFromContext(form.context)

  preventDataLoss(form);
</script>

<Content {form} />

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