Getting started

Install the package, mark the rows, and bind the highlight to the element that holds them.

Install

npm install @reuse-sh/interactions

Use it

The browser module works without a framework. In React, the component creates the same controller when it mounts and destroys it when it unmounts.

import { createMovingHighlight } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

// <nav class="menu">
//   <a data-reuse-row data-current href="/">Overview</a>
//   <a data-reuse-row href="/examples">Examples</a>
// </nav>
const highlight = createMovingHighlight(document.querySelector(".menu"));

// Later, when the menu leaves the page
highlight.destroy();

import { MovingHighlight } from "@reuse-sh/interactions/react";
import "@reuse-sh/interactions/styles.css";

export function Menu({ current }) {
  return (
    <MovingHighlight className="menu">
      <a data-reuse-row data-current={current === "/" ? "" : undefined} href="/">Overview</a>
      <a data-reuse-row data-current={current === "/examples" ? "" : undefined} href="/examples">Examples</a>
    </MovingHighlight>
  );
}