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

Хуки вебхуков

Хук useWebhook предоставляет методы для работы с вебхуками в React приложениях.

useWebhook()​

Возвращаемые методы​

  • trigger() — вызов вебхука
  • isTriggering — состояние выполнения
  • error — ошибка выполнения

Пример​

import { useWebhook } from '@emd-cloud/react-components';

function WebhookTrigger() {
  const { trigger, isTriggering, error } = useWebhook();
  
  const handleTrigger = async () => {
    try {
      await trigger('webhook-id', {
        event: 'user_action',
        data: { userId: '123', action: 'click' }
      });
      
      console.log('Вебхук вызван успешно');
    } catch (err) {
      console.error('Ошибка:', err);
    }
  };
  
  return (
    <div>
      <button onClick={handleTrigger} disabled={isTriggering}>
        {isTriggering ? 'Отправка...' : 'Вызвать вебхук'}
      </button>
      
      {error && <div className="error">{error.message}</div>}
    </div>
  );
}

Интеграция с формами​

function ContactForm() {
  const { trigger } = useWebhook();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      await trigger('contact-form-webhook', formData);
      alert('Сообщение отправлено!');
      setFormData({ name: '', email: '', message: '' });
    } catch (error) {
      alert('Ошибка отправки');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Имя"
        required
      />
      <input
        type="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        placeholder="Email"
        required
      />
      <textarea
        value={formData.message}
        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
        placeholder="Сообщение"
        required
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

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

Полезные ссылки​