Prevent page reload

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

Example

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

<script lang="ts">
  import { Content, setFromContext } from "@sjsf/form";
  import { preventPageReload } from "@sjsf/form/prevent-page-reload.svelte";

  import { createMyForm } from "@/components/my-form";

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

  preventPageReload(form);
</script>

<Content />

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