tools-only Generic Component Patterns
Generic components provide type safety while maintaining reusability. TypeScript infers generic type parameters from prop values — no manual type annotations needed at call site.
Generic Table Component
Full-featured table with typed columns, custom rendering, sorting.
type Column<T> = {
key: keyof T;
header: string;
render?: (value: T[keyof T], item: T) => React.ReactNode;
sortable?: boolean;
};
type TableProps<T> = {
data: T[];
columns: Column<T>[];
keyExtractor: (item: T) => string | number;
onSort?: (key: keyof T, direction: 'asc' | 'desc') => void;
className?: string;
};
function Table<T>({
data,
columns,
keyExtractor,
onSort,
className,
}: TableProps<T>) {
const [sortKey, setSortKey] = React.useState<keyof T | null>(null);
const [sortDir, setSortDir] = React.useState<'asc' | 'desc'>('asc');
const handleSort = (key: keyof T) => {
const newDir = sortKey === key && sortDir === 'asc' ? 'desc' : 'asc';
setSortKey(key);
setSortDir(newDir);
onSort?.(key, newDir);
};
return (
<table className={className}>
<thead>
<tr>
{columns.map((col) => (
<th key={String(col.key)}>
{col.sortable ? (
<button => handleSort(col.key)}>
{col.header}
{sortKey === col.key && (sortDir === 'asc' ? ' ↑' : ' ↓')}
</button>
) : (
col.header
)}
</th>
))}
</tr>
</thead>
<tbody>
{data.map((item) => (
<tr key={keyExtractor(item)}>
{columns.map((col) => (
<td key={String(col.key)}>
{col.render
? col.render(item[col.key], item)
: String(item[col.key])}
</td>
))}
</tr>
))}
</tbody>
</table>
);
}
Usage:
type User = {
id: number;
name: string;
email: string;
role: 'admin' | 'user';
createdAt: Date;
};
function UserTable({ users }: { users: User[] }) {
const [sortedUsers, setSortedUsers] = React.useState(users);
const handleSort = (key: keyof User, direction: 'asc' | 'desc') => {
const sorted = [...users].sort((a, b) => {
if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
return 0;
});
setSortedUsers(sorted);
};
return (
<Table
data={sortedUsers}
columns={[
{ key: 'name', header: 'Name', sortable: true },
{
key: 'email',
header: 'Email',
render: (email) => <a href={`mailto:${email}`}>{email}</a>,
},
{
key: 'role',
header: 'Role',
render: (role) => (
<span className={role === 'admin' ? 'badge-admin' : 'badge-user'}>
{role}
</span>
),
},
{
key: 'createdAt',
header: 'Created',
render: (date) => new Date(date).toLocaleDateString(),
sortable: true,
},
]}
keyExtractor={(user) => user.id}
/>
);
}
Generic Select/Dropdown
Type-safe select with custom option rendering, searching.
type SelectProps<T> = {
options: T[];
value: T | null;
onChange: (value: T) => void;
getLabel: (option: T) => string;
getValue: (option: T) => string | number;
placeholder?: string;
disabled?: boolean;
searchable?: boolean;
};
function Select<T>({
options,
value,
onChange,
getLabel,
getValue,
placeholder = 'Select...',
disabled = false,
searchable = false,
}: SelectProps<T>) {
const [search, setSearch] = React.useState('');
const [isOpen, setIsOpen] = React.useState(false);
const filtered = searchable
? options.filter((opt) =>
getLabel(opt).toLowerCase().includes(search.toLowerCase())
)
: options;
const handleSelect = (option: T) => {
onChange(option);
setIsOpen(false);
setSearch('');
};
return (
<div className="select-wrapper">
<button
=> setIsOpen(!isOpen)}
disabled={disabled}
className="select-trigger"
>
{value ? getLabel(value) : placeholder}
</button>
{isOpen && (
<div className="select-dropdown">
{searchable && (
<input
type="text"
value={search}
=> setSearch(e.target.value)}
placeholder="Search..."
autoFocus
/>
)}
<ul>
{filtered.map((option) => (
<li
key={getValue(option)}
=> handleSelect(option)}
className={value === option ? 'selected' : ''}
>
{getLabel(option)}
</li>
))}
</ul>
</div>
)}
</div>
);
}
Usage:
type Country = {
code: string;
name: string;
flag: string;
};
const countries: Country[] = [
{ code: 'US', name: 'United States', flag: '🇺🇸' },
{ code: 'CA', name: 'Canada', flag: '🇨🇦' },
{ code: 'MX', name: 'Mexico', flag: '🇲🇽' },
];
function CountrySelector() {
const [country, setCountry] = React.useState<Country | null>(null);
return (
<Select
options={countries}
value={country}
getLabel={(c) => `${c.flag} ${c.name}`}
getValue={(c) => c.code}
searchable
placeholder="Select country"
/>
);
}
Generic List with Render Props
Flexible list rendering with type-safe render props.
type ListProps<T> = {
items: T[];
renderItem: (item: T, index: number) => React.ReactNode;
renderEmpty?: () => React.ReactNode;
keyExtractor: (item: T, index: number) => string | number;
className?: string;
as?: 'ul' | 'ol' | 'div';
};
function List<T>({
items,
renderItem,
renderEmpty,
keyExtractor,
className,
as: Component = 'ul',
}: ListProps<T>) {
if (items.length === 0 && renderEmpty) {
return <>{renderEmpty()}</>;
}
return (
<Component className={className}>
{items.map((item, index) => {
const key = keyExtractor(item, index);
const element = renderItem(item, index);
return Component === 'div' ? (
<div key={key}>{element}</div>
) : (
<li key={key}>{element}</li>
);
})}
</Component>
);
}
Usage:
type Task = {
id: string;
title: string;
completed: boolean;
priority: 'low' | 'medium' | 'high';
};
function TaskList({ tasks }: { tasks: Task[] }) {
return (
<List
items={tasks}
keyExtractor={(task) => task.id}
renderItem={(task) => (
<div className={`task priority-${task.priority}`}>
<input type="checkbox" checked={task.completed} readOnly />
<span className={task.completed ? 'completed' : ''}>{task.title}</span>
</div>
)}
renderEmpty={() => (
<div className="empty-state">No tasks yet. Add one to get started!</div>
)}
as="div"
/>
);
}
Constrained Generic Components
Use constraints to ensure required properties or methods.
// Constraint: items must have `id` property
type HasId = { id: string | number };
type GridProps<T extends HasId> = {
items: T[];
renderCard: (item: T) => React.ReactNode;
columns?: 2 | 3 | 4;
};
function Grid<T extends HasId>({
items,
renderCard,
columns = 3,
}: GridProps<T>) {
return (
<div className={`grid grid-cols-${columns}`}>
{items.map((item) => (
<div key={item.id} className="grid-item">
{renderCard(item)}
</div>
))}
</div>
);
}
// Usage - type must have `id` property
type Product = {
id: number;
name: string;
price: number;
image: string;
};
<Grid
items={products}
renderCard={(product) => (
<div>
<img src={product.image} alt={product.name} />
<h3>{product.name}</h3>
<p>${product.price}</p>
</div>
)}
columns={3}
/>;
Multiple Generic Parameters
Components with multiple type parameters.
type PairProps<K, V> = {
pairs: Array<[K, V]>;
renderKey: (key: K) => React.ReactNode;
renderValue: (value: V) => React.ReactNode;
};
function KeyValueList<K, V>({ pairs, renderKey, renderValue }: PairProps<K, V>) {
return (
<dl>
{pairs.map(([key, value], index) => (
<React.Fragment key={index}>
<dt>{renderKey(key)}</dt>
<dd>{renderValue(value)}</dd>
</React.Fragment>
))}
</dl>
);
}
// Usage
type MetricKey = 'cpu' | 'memory' | 'disk';
type MetricValue = { current: number; max: number };
const metrics: Array<[MetricKey, MetricValue]> = [
['cpu', { current: 45, max: 100 }],
['memory', { current: 8, max: 16 }],
['disk', { current: 250, max: 500 }],
];
<KeyValueList
pairs={metrics}
renderKey={(key) => <strong>{key.toUpperCase()}</strong>}
renderValue={(val) => (
<span>
{val.current}/{val.max}
</span>
)}
/>;
Generic Form Field Component
Reusable form field with type-safe value handling.
type FieldProps<T> = {
name: string;
label: string;
value: T;
onChange: (value: T) => void;
type: 'text' | 'number' | 'email' | 'password';
error?: string;
required?: boolean;
};
function FormField<T extends string | number>({
name,
label,
value,
onChange,
type,
error,
required = false,
}: FieldProps<T>) {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue =
type === 'number' ? (Number(e.target.value) as T) : (e.target.value as T);
onChange(newValue);
};
return (
<div className="form-field">
<label htmlFor={name}>
{label}
{required && <span className="required">*</span>}
</label>
<input
id={name}
name={name}
type={type}
value={value}
required={required}
aria-invalid={!!error}
aria-describedby={error ? `${name}-error` : undefined}
/>
{error && (
<span id={`${name}-error`} className="error">
{error}
</span>
)}
</div>
);
}
// Usage
function UserForm() {
const [name, setName] = React.useState('');
const [age, setAge] = React.useState(0);
return (
<form>
<FormField
name="name"
label="Name"
value={name}
type="text"
required
/>
<FormField
name="age"
label="Age"
value={age}
type="number"
/>
</form>
);
}
Generic Modal/Dialog
Type-safe modal with generic result type.
type ModalProps<T> = {
isOpen: boolean;
onClose: (result?: T) => void;
title: string;
children: (submit: (result: T) => void) => React.ReactNode;
};
function Modal<T>({ isOpen, onClose, title, children }: ModalProps<T>) {
if (!isOpen) return null;
const handleSubmit = (result: T) => {
onClose(result);
};
return (
<div className="modal-overlay">
<div className="modal">
<header>
<h2>{title}</h2>
<button => onClose()}>×</button>
</header>
<div className="modal-body">{children(handleSubmit)}</div>
</div>
</div>
);
}
// Usage
type UserFormData = { name: string; email: string };
function App() {
const [showModal, setShowModal] = React.useState(false);
const [formData, setFormData] = React.useState<UserFormData>({
name: '',
email: '',
});
const handleModalClose = (result?: UserFormData) => {
if (result) {
console.log('User submitted:', result);
}
setShowModal(false);
};
return (
<>
<button => setShowModal(true)}>Add User</button>
<Modal<UserFormData>
isOpen={showModal}
title="Add New User"
>
{(submit) => (
<form
=> {
e.preventDefault();
submit(formData);
}}
>
<input
value={formData.name}
=> setFormData({ ...formData, name: e.target.value })}
placeholder="Name"
/>
<input
value={formData.email}
=> setFormData({ ...formData, email: e.target.value })}
placeholder="Email"
/>
<button type="submit">Submit</button>
</form>
)}
</Modal>
</>
);
}