React — Capture

Track custom events from your React components using the Signal hooks. Use useSignal() for full SDK access or useSignalCapture() for a memoized capture function.

useSignal

Get the full Signal SDK instance and call capture (or any other method):

import { useSignal } from '@signal-js/react';

function MyComponent() {
  const signal = useSignal();

  const handleClick = () => {
    signal.capture('button_clicked', { buttonId: 'cta' });
  };

  return <button onClick={handleClick}>Click Me</button>;
}

useSignal() returns: signal, isInitialized, isRecording, sessionId, distinctId, capture, identify, setPersonProperties, setPersonPropertiesOnce, group, register, registerOnce, unregister, getSuperProperties, alias, reset, optOut, optIn, hasOptedOut, startRecording, stopRecording, pauseRecording, resumeRecording, flush. See individual method pages for details.

useSignalCapture

Get only a memoized capture function (useful when you only need to track events):

import { useSignalCapture } from '@signal-js/react';

function MyComponent() {
  const capture = useSignalCapture();

  const handleClick = () => {
    capture('button_clicked', { buttonId: 'cta' });
  };

  return <button onClick={handleClick}>Click Me</button>;
}

capture(eventName, properties?)

eventName (string) — Event name (e.g. 'order_created', 'add_to_cart').
properties (Record<string, unknown> optional) — Arbitrary JSON-serializable properties.

Both signal.capture() (from useSignal()) and the function returned by useSignalCapture() have the same signature. Events are sent in batches; identity and session context are attached automatically.

Example

import { useSignalCapture } from '@signal-js/react';

function CheckoutButton({ orderId, amount }) {
  const capture = useSignalCapture();

  const handleCheckout = () => {
    capture('checkout_started', { orderId, amount });
    // ... then run checkout logic
  };

  return <button onClick={handleCheckout}>Checkout</button>;
}

Getting Started

Features

Integrations

Capture

React — Capture

useSignal

useSignalCapture

capture(eventName, properties?)

Example

See also

​React — Capture

​useSignal

​useSignalCapture

​capture(eventName, properties?)

​Example

​See also

React — Capture

useSignal

useSignalCapture

capture(eventName, properties?)

Example

See also