menu-setup

Menu Setup

Setup

npm install react-horizontal-scrolling-menu

import React from 'react';
import {
  ScrollMenu,
  VisibilityContext,
  type publicApiType,
} from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';

const items = Array.from({ length: 10 }, (_, i) => `item-${i + 1}`);

export function App() {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {items.map((id) => (
        <Card itemId={id} key={id} title={id} />
      ))}
    </ScrollMenu>
  );
}

function LeftArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useLeftArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollPrev()}>
      ←
    </button>
  );
}

function RightArrow() {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const disabled = api.useRightArrowVisible();
  return (
    <button disabled={disabled} onClick={() => api.scrollNext()}>
      →
    </button>
  );
}

function Card({ itemId, title }: { itemId: string; title: string }) {
  const api = React.useContext<publicApiType>(VisibilityContext);
  const visible = api.useIsVisible(itemId, true);
  return (
    <div style={{ width: '160px' }} data-visible={visible}>
      {title}
    </div>
  );
}

Three contracts this relies on, none of which produce an error when violated:

• Every direct child of ScrollMenu needs a unique itemId prop (the React key is the fallback). Ids are String()-coerced.
• styles.css is a separate import — the JS bundle never injects CSS.
• Item width comes from your CSS, in fixed units. The menu measures nothing.

The arrow hooks are the canonical edge detection: useLeftArrowVisible() / useRightArrowVisible() return true when the first/last item is visible — use the return value directly as the arrow's disabled state, as above. Despite the "Visible" in the name, this is a disabled-latch: it only updates while the menu itself is on screen, so arrows do not flicker when the page scrolls vertically past the menu (src/createApi.ts:65-89).