Skip to main content

Getting Started

Learn how to get started with Form Guardian in your project.

Installation​

Install the packages you need:

# For DOM-based autosave (works with any framework)
npm install @form-guardian/dom

# For React applications
npm install @form-guardian/react

# For core functionality only (headless)
npm install @form-guardian/core

Note: @form-guardian/react requires React as a peer dependency:

npm install react@^16.8.0 || ^17.0.0 || ^18.0.0

Basic Setup​

Vanilla JavaScript​

<form id="my-form">
  <input name="name" type="text" />
  <input name="email" type="email" />
  <button type="submit">Submit</button>
</form>

<script type="module">
  import { attachFormAutosave } from '@form-guardian/dom';

  const form = document.getElementById('my-form');
  
  const autosave = attachFormAutosave({
    formId: 'my-form-id',
    root: form,
    autoRestore: true,
  });

  form.addEventListener('submit', () => {
    autosave.clear();
  });
</script>

React​

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef, clearDraft } = useFormAutosave('my-form-id', {
    autoRestore: true,
  });

  const onSubmit = async (e) => {
    e.preventDefault();
    // ... your logic
    await clearDraft();
  };

  return (
    <form ref={formRef} onSubmit={onSubmit}>
      <input name="name" type="text" />
      <input name="email" type="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

Next Steps​