CodeDiff

API reference and demos for CodeDiff.

Source

Import

import { CodeDiff } from "@flanksource/clicky-ui/data";

Demos

Type Script · Open in Storybook

Go · Open in Storybook

Python · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
bare	boolean	—	Render only the rows — no border, background, or language header.
className	string	—	—
language	string	—	Highlighter language hint, e.g. `typescript`, `go`, `python`.
lineWidgets	DiffLineWidget[]	—	Rendered as a full-width row directly below the row matching `(side, line)`, in array order. A context line matches both its `old` and `new` number.
modified	string	—	—
modifiedLabel	ReactNode	—	Names the modified (right) side; unified view prefixes it with a plus.
onLineAction	(…) => …	—	When set, every numbered line shows a "+" button in its gutter (on row hover or keyboard focus). Added/context lines report side `new`, deleted lines `old`; in split view the left column is `old` and the right `new`.
original	string	—	—
originalLabel	ReactNode	—	Names the original (left) side; unified view prefixes it with a minus.
showLineNumbers	boolean	—	Show old/new line-number gutters. Defaults to `true`.
unified	string	—	—
view	enum	—	Unified (single column) or split (side-by-side). Defaults to `unified`.