React Integration

Add analytics to your React Figma plugin with the useTode hook. This guide covers everything you need to track user actions in your React-based Figma plugins and widgets.

Installation

Install the core SDK and React adapter:

Terminal

npm install @tode-sdk/core @tode-sdk/figma-react

Setup

Initialize in Plugin Controller

First, set up Tode in your plugin's main code file:

code.js

import { tode } from '@tode-sdk/core';

// Show your React UI
figma.showUI(__html__, { width: 400, height: 600 });

// Initialize Tode for Figma plugin analytics
await tode.init({ apiKey: 'your-api-key' });

// Optional: Track plugin open from controller
tode.trackAction('plugin_opened');

Configure Network Access

Add Tode's URLs to your plugin's manifest.json to enable analytics requests. Learn more about network access.

manifest.json

{
  "name": "Your Plugin",
  "id": "your-plugin-id",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "index.html",
  "networkAccess": {
    "allowedDomains": [
      "https://mvp-events-processing-production.up.railway.app",
      "wss://mvp-events-processing-production.up.railway.app"
    ]
  }
}

Use the Hook in Your React UI

Use the useTode hook in your React components:

App.jsx

import { useTode } from '@tode-sdk/figma-react';

function App() {
const { tode, isReady } = useTode();

const handleExport = () => {
  if (isReady) {
    tode.trackAction('export_clicked');
  }
};

return (
  <button onClick={handleExport} disabled={!isReady}>
    Export Design
  </button>
);
}

Hook Reference

useTode()

Returns an object with:

Property	Type	Description
`tode`	`Tode`	The Tode instance for tracking
`isReady`	`boolean`	Whether Tode is initialized and ready (`tode.isReady`)

Examples

Track Button Clicks

ToolButton.jsx

import { useTode } from '@tode-sdk/figma-react';

function ToolButton({ tool }) {
const { tode, isReady } = useTode();

const handleClick = () => {
  if (isReady) {
    tode.trackAction(`tool_selected_${tool}`);
  }
};

return <button onClick={handleClick}>{tool}</button>;
}

Track with Metrics

ExportPanel.jsx

import { useTode } from '@tode-sdk/figma-react';

function ExportPanel() {
const { tode, isReady } = useTode();

const handleExport = async (items) => {
  // Perform export logic...

  // Track export with item count
  if (isReady) {
    tode.trackActionWithMetric('items_exported', items.length);
  }
};

return (
  <button onClick={() => handleExport(selectedItems)}>
    Export Selected
  </button>
);
}

Track Feature View Once

FeatureComponent.jsx

import { useTode } from '@tode-sdk/figma-react';
import { useState, useEffect } from 'react';

function FeatureComponent() {
const { tode, isReady } = useTode();
const [hasTrackedView, setHasTrackedView] = useState(false);

useEffect(() => {
  if (isReady && !hasTrackedView) {
    tode.trackAction('feature_viewed');
    setHasTrackedView(true);
  }
}, [isReady, hasTrackedView]);

return <div>Feature Content</div>;
}

Best Practices

1. Always Check `isReady`

Before calling any tracking method, ensure Tode is ready:

TypeScript

// Good
if (isReady) {
  tode.trackAction('action');
}
 
// Bad - may fail silently
tode.trackAction('action');

2. Use Descriptive Action Names

Choose clear, consistent names for your Figma plugin analytics:

TypeScript

// Good
tode.trackAction('export_to_png');
tode.trackAction('layer_renamed');
tode.trackAction('settings_opened');
 
// Bad - too vague
tode.trackAction('click');
tode.trackAction('action1');

3. Track Key User Journeys

Focus on tracking actions that matter:

Plugin open
Core feature usage
Export/save actions
Settings changes

Next Steps

Learn about the API Reference for all available methods
See other framework guides: Vue, Angular, Svelte

#React Integration

#Installation

#Setup

#Hook Reference

#useTode()

#Examples

#Track Button Clicks

#Track with Metrics

#Track Feature View Once

#Best Practices

#1. Always Check isReady

#2. Use Descriptive Action Names

#3. Track Key User Journeys

#Next Steps

Track your Figma plugin