Connectors

InstallationCopy Anchor Link

npm install @remold-ui/react

Using plain JavaScript? Install @remold-ui/dom instead.

UsageCopy Anchor Link

Mark the points lines run between with Remold.Anchor: give each a name, and linkTo the anchor its line comes from. Put a Morph inside, and the lines follow every element while it moves.

import { Remold } from "@remold-ui/react";

<Remold.Connectors radius={12}>
  <Remold.Morph trigger={thread}>
    {comments.map((comment) => (
      <article key={comment.id}>
        <Remold.Anchor
          name={comment.id}
          linkTo={comment.parentId}
          render={<Avatar user={comment.author} />}
        />
        <p>{comment.text}</p>
      </article>
    ))}
  </Remold.Morph>
</Remold.Connectors>

Without React, write the attributes yourself: data-rm-anchor="c2" and data-rm-link="c1" on each avatar. The root needs position: relative, and the <svg> should cover it (position: absolute; inset: 0). connectors() returns update() and destroy().

linkTo can be undefined for anchors with no line coming in, like the top-level comments. Anchor renders a span; render puts the anchor on your own element instead. Under the hood it's two attributes, data-rm-anchor and data-rm-link, which you can also write yourself.

• Lines start under the anchor's middle and end at the left side of the linked element, so they suit trees and threads where children sit below and to the right.
• A line that appears draws itself in; a line whose element goes draws itself out. Lines that are there when the page loads are simply there.
• With reduced motion, lines still follow the elements, but appear and disappear at once.
• Style them with CSS: each line is a path.rm-connector. Lines drawing in or out carry data-rm-drawing.
• Give the linked element data-rm-line="something" and its line gets data-line="something": a way to style one line differently, like lighting up the path to a hovered reply.

.my-tree .rm-connector {
  stroke: #cbd5e1;
  stroke-width: 1.5;
}

.my-tree .rm-connector[data-line="lit"] {
  stroke: #a78bfa;
  filter: drop-shadow(0 0 6px #a78bfa);
}

API referenceCopy Anchor Link