React Templates

For teams building modern web applications, Handoff supports native React templates. This allows you to use your production components directly within the design system documentation, ensuring that what you document is exactly what you deploy.

Simple Example: Icon Button

A straightforward React component using TypeScript for property definitions.

example.tsx
tsx
1import React from 'react';
2
3interface IconButtonProps {
4  icon: string;
5  variant?: 'primary' | 'secondary';
6  onClick?: () => void;
7}
8
9export const IconButton: React.FC<IconButtonProps> = ({ icon, variant = 'primary', onClick }) => {
10  return (
11    <button className={`btn-icon btn-${variant}`} onClick={onClick}>
12      <i className={`icon-${icon}`} />
13    </button>
14  );
15};

---

Complex Example: Data Grid

A complex component demonstrating sub-components and nested property mapping.

example.tsx
tsx
1import React from 'react';
2
3interface Column {
4  key: string;
5  header: string;
6}
7
8interface DataGridProps {
9  columns: Column[];
10  data: any[];
11  theme?: 'light' | 'dark';
12}
13
14export const DataGrid: React.FC<DataGridProps> = ({ columns, data, theme = 'light' }) => {
15  return (
16    <div className={`data-grid grid-${theme}`}>
17      <div className="grid-header">
18        {columns.map(col => (
19          <div key={col.key} className="grid-col-header">{col.header}</div>
20        ))}
21      </div>
22      <div className="grid-body">
23        {data.map((row, i) => (
24          <div key={i} className="grid-row">
25            {columns.map(col => (
26              <div key={col.key} className="grid-cell">{row[col.key]}</div>
27            ))}
28          </div>
29        ))}
30      </div>
31    </div>
32  );
33};

---

Integration Details

When using React templates in Handoff:

• SSR Rendering: Handoff uses a specialized SSR engine to render your React components into static HTML for documentation previews.
• Type Safety: Your interface definitions are respected, ensuring that manual edits in the documentation site remain valid.
• Prop Mapping: Ensure your component props match the property names defined in your config.json for seamless Figma-to-code synchronization.