Splitter Synced Compare

ProNew

Two panes for comparing documents or versions with a Sync scrolling switch that mirrors the scroll position by proportion.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

leftTitle

rightTitle

Guide and examples

When to use it

Use this when people read two versions or two documents in parallel: contract redlines, release notes, translations, log files.

Do not use it when you need line-level highlighting of differences (use a diff viewer).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`leftTitle`	`string`	required	-
`rightTitle`	`string`	required	-
`left`	`React.ReactNode`	required	-
`right`	`React.ReactNode`	required	-

Accessibility

Both panes are focusable and labelled so keyboard users can scroll them with arrow keys.
Sync scrolling is an explicit switch with a label, off by default.
The scroll listener ignores its own echo.

Testing

The pattern ships with a Testing Library test (splitter-synced-compare.test.tsx) that covers the off default, proportional mirroring and the focusable panes.

Guide and examples

When to use it

Use this when people read two versions or two documents in parallel: contract redlines, release notes, translations, log files.

Do not use it when you need line-level highlighting of differences (use a diff viewer).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`leftTitle`	`string`	required	-
`rightTitle`	`string`	required	-
`left`	`React.ReactNode`	required	-
`right`	`React.ReactNode`	required	-

Accessibility

Both panes are focusable and labelled so keyboard users can scroll them with arrow keys.
Sync scrolling is an explicit switch with a label, off by default.
The scroll listener ignores its own echo.

Testing

The pattern ships with a Testing Library test (splitter-synced-compare.test.tsx) that covers the off default, proportional mirroring and the focusable panes.