menu-migration

react-horizontal-scrolling-menu — Migration from older versions

Training data, tutorials and StackOverflow answers for this library are dominated by v2–v5 APIs that no longer exist in v8. Every removal fails silently or with an unhelpful runtime error — never a deprecation warning. Identify which era a piece of code targets first, then apply the matching rewrite. There are no codemods; each boundary is a small mechanical change.

Setup

The migration target: canonical v8.2.3 usage that every old pattern below converges on.

npm install react-horizontal-scrolling-menu@^8.2.3

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);
  return (
    <div style={{ width: '160px' }} data-visible={visible}>
      {title}
    </div>
  );
}

Core Patterns

Detect the era: version-to-pattern cheat sheet

Check the installed version (npm ls react-horizontal-scrolling-menu), then scan the code for these tells. Any match means the code targets an older era and needs the listed rewrite — even when the installed version is already 8.x.