API reference

<GitGraph> props

NameTypeDefaultDescription
commitsCommit[]Required. The full commit set to render. Topologically sorted internally.
headstringSha of HEAD. The matching row gets a HEAD indicator alongside its refs.
selectedShastringControlled selection. When provided, GitGraph treats the component as controlled and won't update internal state.
defaultSelectedShastringInitial selection in uncontrolled mode.
onSelectChange(sha: string | undefined) => voidFires when the selection changes (controlled or uncontrolled).
onCommitClick(commit: Commit) => voidFires on row click. Independent of selection.
onCommitHover(commit: Commit | null) => voidFires on row mouseenter (with the commit) and mouseleave (with null).
filter(commit: Commit) => booleanPredicate that hides commits for which it returns false. The layout engine rewrites edges to skip filtered commits — if A's parent B is filtered out, A's edge points to B's nearest visible ancestor. Selection state survives a commit being filtered out: the row disappears but the detail drawer (if rendered) keeps the remembered commit.
renderDetail(commit: Commit | undefined) => ReactNodeWhen provided, renders an off-canvas right-side drawer alongside the graph. The function receives the currently selected commit (or undefined if no selection) and returns the drawer's interior.
defaultDetailOpenbooleanfalseInitial open state of the detail drawer in uncontrolled mode.
detailOpenbooleanControlled open state of the detail drawer. When provided, GitGraph treats the drawer as controlled and won't update internal open state.
onDetailOpenChange(open: boolean) => voidFires when the drawer requests an open-state change (controlled or uncontrolled). In controlled mode, return this signal back into detailOpen to commit; ignore to decouple from the default click-to-open behavior.
showWorkingTreeRowbooleanfalsePrepend a synthetic working-tree row above HEAD.
laneWidthnumber16Pixel width of one lane in the gutter. Must match the --graph-lane-width CSS variable if you override it.
rowHeightnumber40Pixel height of each row. Must match --graph-row-height.
nodeRadiusnumber5Radius of commit nodes.
strokeWidthnumber1.5Stroke width of edges.
classNamestringAppended to the root <div>'s className.
scrollContainerRefRefObject<HTMLElement | null>If provided, GitGraph virtualizes against this scroll container instead of its own. Use for window-scroll layouts.

<GitGraphGutter> props

NameTypeDefaultDescription
layoutLayoutResultRequired. Output of computeLayout(commits).
laneWidthnumber16Pixel width of one lane.
rowHeightnumber40Pixel height of one row.
nodeRadiusnumber5Radius of commit nodes.
strokeWidthnumber1.5Stroke width of edges.
classNamestringAppended to the SVG's className.
range{ fromRow: number; toRow: number }Render only nodes/edges touching this row range. Used for virtualization.

Errors

Invalid input throws GitGraphInputError (re-exported from types.ts). The kind property discriminates between "empty", "duplicate-sha", "missing-parent", "cycle", and "head-not-found". The component renders a typed error UI instead of throwing through the React tree.