React
React SDK
The official React SDK for ExodeUI. Supports high-performance rendering, state machines, physics, and built-in SEO optimizations.
exodeui
Installation
bash
npm install exodeuiGetting Started
The React SDK provides full integration with React, including hooks, state management, and physics engine access.
Exode Vite plugin for .exode imports
State variables & logic via useExodeUI hook
Built-in SEO & accessibility
Vite Setup
If using Vite, configure the Exode Vite plugin to load .exode files:
ts
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { exodePlugin } from 'exodeui/vite-plugin'
export default defineConfig({
plugins: [react(), exodePlugin()],
})Basic Usage
tsx
import { ExodeUICanvas } from 'exodeui';
function App() {
return (
<div style={{ width: 800, height: 600 }}>
<ExodeUICanvas
src="/animations/my-scene.json"
autoPlay={true}
fit="Contain"
alignment="Center"
/>
</div>
);
}State Variables & Controls
Drive state variables from React using the useExodeUI hook:
tsx
import { useExodeUI, ExodeUICanvas } from 'exodeui';
function Controls() {
const { setEngine, setInputBool, fireTrigger, getInputValue } = useExodeUI();
return (
<>
<ExodeUICanvas src="/player_controller.json" onReady={setEngine} />
<button onClick={() => setInputBool('IsRunning', true)}>Run</button>
<button onClick={() => fireTrigger('Jump')}>Jump</button>
<button onClick={() => console.log(getInputValue('MyRandomNumber'))}>
Log Value
</button>
</>
);
}Data Visualization & Graphs (v7.0.0)
Render high-performance Catmull-Rom line graphs, bar charts, and pie charts with real-time updates directly from your React state:
tsx
import { useExodeUI, ExodeUICanvas } from 'exodeui';
function RealtimeDashboard() {
const { setEngine, updateGraphData, updateBarChartData, updatePieChartData } = useExodeUI();
const handleUpdate = () => {
// 1. Update LineGraph data points
updateGraphData('SalesGraph', [12, 45, 28, 80, 65, 95]);
// 2. Update BarChart series and categories
updateBarChartData('RevenueBarChart', [[100, 200, 300]], ['Q1', 'Q2', 'Q3']);
// 3. Update PieChart slice values
updatePieChartData('MarketSharePie', [45, 30, 25]);
};
return (
<div>
<ExodeUICanvas src="/dashboard.json" onReady={setEngine} />
<button onClick={handleUpdate}>Stream Live Data</button>
</div>
);
}useExodeUI Hook API
| Method | Signature | Description |
|---|---|---|
| setEngine | (engine: ExodeUIEngine) => void | Connects the hook to ExodeUICanvas onReady |
| setInputBool | (name: string, value: boolean) => void | Sets a boolean state machine input |
| setInputNumber | (name: string, value: number) => void | Sets a numeric input value |
| setInputText | (name: string, value: string) => void | Sets a text/string input value |
| setInputNumberArray | (name: string, value: number[]) => void | Passes an array of numbers to data-bound components |
| updateGraphData | (nameOrId: string, data: number[] | number[][], categories?: string[]) => void | Polymorphic real-time data updater for LineGraph, BarChart, or PieChart |
| updateBarChartData | (nameOrId: string, datasets: number[][], categories?: string[]) => void | Updates multi-series datasets and category labels on bar charts |
| updatePieChartData | (nameOrId: string, slices: (number | object)[]) => void | Updates slices and proportions on pie charts |
| setDropdownOptions | (nameOrId: string, options: string[]) => void | Dynamically populates dropdown / select options |
| fireTrigger | (name: string) => void | Fires a momentary trigger input or entry transition |
| getInputValue | (nameOrId: string) => any | Reads the runtime value of any state variable or engine-evaluated property |
SEO & Metadata
The ExodeSEO component manages meta tags and accessible HTML overlay:
tsx
import { ExodeUICanvas, ExodeSEO } from 'exodeui';
function MyPage({ artboard }) {
return (
<>
<ExodeSEO artboard={artboard} />
<ExodeUICanvas artboard={artboard} />
</>
);
}ExodeUICanvas Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | URL to the animation JSON file |
| artboard | object | — | Direct JSON data object |
| fit | 'Contain' | 'Cover' | 'Fill' | 'Contain' | Scaling strategy |
| alignment | 'Center' | 'TopLeft' ... | 'Center' | Canvas alignment |
| autoPlay | boolean | true | Auto-start the animation loop |
| onReady | (engine) => void | — | Callback when engine is initialized |
| onTrigger | (name, anim) => void | — | Listener for state machine triggers |
| onInputUpdate | (name, value) => void | — | Listener for input updates |
Motion Architecture Concepts
Deep dive into foundational motion concepts, spring physics, and timeline sequencing:
Production React Recipes
Copyable, production-ready motion recipes for common React UI patterns: