JSDoc for React Component Props

Documenting React Components

React components are functions that accept props and return JSX. Documenting them involves describing the component's purpose, its props interface, default prop values, and any side effects.

Example Signature

function DataTable<T extends Record<string, unknown>>(props: {
  data: T[];
  columns: ColumnDef<T>[];
  onRowClick?: (row: T) => void;
  loading?: boolean;
  emptyMessage?: string;
}): JSX.Element

Generated TSDoc

/**
 * A generic data table component that renders tabular data with
 * configurable columns, row click handling, and loading states.
 *
 * @typeParam T - The shape of each data row. Must be a record type.
 * @param props - The component props.
 * @param props.data - The array of row data to display.
 * @param props.columns - Column definitions controlling header labels,
 *   cell rendering, and sorting behavior.
 * @param props.onRowClick - Optional callback fired when a row is clicked.
 * @param props.loading - Show a loading skeleton instead of data.
 *   Defaults to false.
 * @param props.emptyMessage - Message shown when data is empty.
 *   Defaults to "No data available".
 * @returns The rendered table element.
 *
 * @example
 * ```tsx
 * <DataTable
 *   data={users}
 *   columns={[
 *     { key: "name", header: "Name" },
 *     { key: "email", header: "Email" },
 *   ]}
 *   onRowClick={(user) => navigate(`/users/${user.id}`)}
 * />
 * ```
 */

Props Documentation Patterns

For React components, document each prop using dot notation on the props parameter:

@param props.loading - Show loading skeleton. Defaults to false.

Component Categories

Component type	Additional tags
Layout components	Describe children slot behavior
Form components	Document onChange, validation rules
Data display	Document loading, empty, and error states
HOCs	Use @typeParam for wrapped component type

Common React Props to Document

• Callback props (onX): When they fire and what arguments they receive
• Boolean flags: What the default is
• Render props / children: What context is passed
• Ref forwarding: What element the ref attaches to