Перейти к основному содержимому

Начало работы

Узнайте, как начать работу с Form Guardian в вашем проекте.

Установка​

Установите необходимые пакеты:

# Для автосохранения на основе DOM (работает с любым фреймворком)
npm install @form-guardian/dom

# Для React приложений
npm install @form-guardian/react

# Только для основного функционала (headless)
npm install @form-guardian/core

Примечание: @form-guardian/react требует React как peer-зависимость:

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

Базовая настройка​

Vanilla JavaScript​

<form id="my-form">
  <input name="name" type="text" />
  <input name="email" type="email" />
  <button type="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();
    // ... ваша логика
    await clearDraft();
  };

  return (
    <form ref={formRef} onSubmit={onSubmit}>
      <input name="name" type="text" />
      <input name="email" type="email" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Следующие шаги​