ConnectPoints
Match pairs by drawing connectors between origin and target items
ConnectPoints lets users match items from the origin set to the target set by drawing connectors. It uses React Flow for reliable connection rendering and supports layout variants.
Import
import { ConnectPoints } from '@bside-tech/tbx-ui/components';Example
<ConnectPoints
pairs={[
{ origin: 'Paris', target: 'France' },
{ origin: 'Berlin', target: 'Germany' },
{ origin: 'Madrid', target: 'Spain' },
]}
layout="columns"
/>Props
Prop
Type
Labels
Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct").
<ConnectPoints
pairs={[{ origin: 'Paris', target: 'France' }]}
labels={{
check: 'Check answers',
reset: 'Reset',
results: 'correct',
}}
/>Style
Tailwind v4 is available for all customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.
CSS Classes
| Key | Element |
|---|---|
root | Root wrapper |
flow | React Flow container |
checkButton | Check button |
resetButton | Reset button |
result | Results text |
CSS Variables
Scoped under .tbx-connectpoints:
| Variable | Purpose |
|---|---|
--connectpoints-item-bg | Item background (default) |
--connectpoints-item-border | Item border |
--connectpoints-item-connected-bg | Item background when connected (before validation). Uses color-mix with --exercise-accent-color. |
--connectpoints-item-connected-border | Item border when connected (before validation). Uses --exercise-accent-color. |
--connectpoints-item-correct-bg, --connectpoints-item-correct-border | Item when correct (after validation) |
--connectpoints-item-wrong-bg, --connectpoints-item-wrong-border | Item when wrong (after validation) |
--connectpoints-connector | Connector line (default) |
--connectpoints-connector-active | Connector when connected (before validation). Uses --exercise-accent-color. |
--connectpoints-connector-correct | Connector when correct |
--connectpoints-connector-wrong | Connector when wrong |
--connectpoints-point-bg | Handle/point background |
--connectpoints-point-border | Handle/point border |
--connectpoints-point-selected | Handle/point when selected (focus) |
--exercise-action-bg, --exercise-action-border | Check/Reset buttons |
--exercise-result-neutral, --exercise-result-correct, --exercise-result-wrong | Results text |
Item labels use --exercise-layout-content-font-size.
Variants
Columns (default)
Origin and target items are arranged in two columns. Connectors run horizontally.
<ConnectPoints
pairs={[
{ origin: 'Paris', target: 'France' },
{ origin: 'Berlin', target: 'Germany' },
{ origin: 'Madrid', target: 'Spain' },
]}
layout="columns"
/>Rows
Origin items on top, target items below. Connectors run vertically. Use with isRandom to shuffle the target set order.
<ConnectPoints
pairs={[
{ origin: 'A', target: '1' },
{ origin: 'B', target: '2' },
{ origin: 'C', target: '3' },
]}
layout="rows"
isRandom
/>