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

Примеры использования

Узнайте, как использовать Form Guardian в реальных сценариях. От быстрых примеров до продвинутых рецептов.

📝 Быстрые примеры​

Простые примеры для начала:

🎯 Распространенные паттерны​

Часто используемые паттерны:

🔥 Продвинутые рецепты​

Сложные сценарии и решения:

Базовая контактная форма​

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

function ContactForm() {
  const { formRef, hasDraft, clearDraft } = useFormAutosave('contact-form', {
    autoRestore: true,
  });

  return (
    <form ref={formRef} onSubmit={async (e) => {
      e.preventDefault();
      await clearDraft();
      // Отправка...
    }}>
      {hasDraft && <div>Найден черновик!</div>}
      <input name="name" placeholder="Имя" />
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Сообщение" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Форма регистрации​

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

function RegistrationForm() {
  const { register, handleSubmit, setValue, getValues, watch } = useForm();
  const { formRef, restoreValues, clearDraft, saveValues } = useFormAutosave(
    'registration',
    { autoRestore: false }
  );

  useEffect(() => {
    restoreValues(setValue, getValues);
  }, []);

  useEffect(() => {
    const subscription = watch(() => saveValues());
    return () => subscription.unsubscribe();
  }, [watch]);

  return (
    <form ref={formRef} onSubmit={handleSubmit(async (data) => {
      await clearDraft();
      // Регистрация пользователя...
    })}>
      <input {...register('username')} placeholder="Имя пользователя" />
      <input {...register('email')} type="email" placeholder="Email" />
      <input {...register('password')} type="password" placeholder="Пароль" />
      <button type="submit">Зарегистрироваться</button>
    </form>
  );
}

Форма опроса​

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

  const form = document.getElementById('survey-form');
  const autosave = attachFormAutosave({
    formId: 'survey-2024',
    root: form,
    autoRestore: true,
    ttl: { days: 30 }, // Черновики опроса истекают через 30 дней
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    
    await fetch('/api/survey', {
      method: 'POST',
      body: formData,
    });
    
    await autosave.clear();
    alert('Спасибо за заполнение опроса!');
  });
</script>

<form id="survey-form">
  <fieldset>
    <legend>Вопрос 1</legend>
    <input type="radio" name="q1" value="yes" id="q1-yes">
    <label for="q1-yes">Да</label>
    <input type="radio" name="q1" value="no" id="q1-no">
    <label for="q1-no">Нет</label>
  </fieldset>

  <fieldset>
    <legend>Вопрос 2</legend>
    <textarea name="q2" rows="4"></textarea>
  </fieldset>

  <button type="submit">Отправить опрос</button>
</form>

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