---
title: "Rail de catégories React pour l'e-commerce"
description: "Un rail de catégories horizontal en React : défilement natif, flèches qui se désactivent aux bords, visibilité par élément pour les images paresseuses et l'analytique. Démo et code source."
canonical: "https://react-horizontal-scrolling-menu.dev/fr/category-rail"
image: "https://react-horizontal-scrolling-menu.dev/og.png"
---

# Un rail de catégories pour votre boutique, en React

Les rails de catégories — la rangée cliquable de rayons au-dessus d'une grille de vitrine — sont les conteneurs de défilement les plus fréquentés en e-commerce, et ce sont des menus, pas des carrousels : chaque vignette est un lien, rien ne s'aligne, et une demi-vignette qui dépasse au bord est ce qui invite au défilement.

TTokyo

OOslo

LLima

CCairo

SSydney

QQuito

SSeoul

PPorto

DDenver

HHanoi

Faites glisser le rail ou utilisez les flèches — elles se désactivent aux véritables extrémités de la rangée.

[Modifier cet exemple en direct dans Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-simple--simple)

## Pourquoi le défilement natif gagne sur une vitrine

Les rails de vitrine vivent au-dessus de la ligne de flottaison, sur des pages où vous vous battez pour chaque point Lighthouse. Un moteur de carrousel embarque des dizaines de kilo-octets d'émulation de gestes pour faire ce que le navigateur fait nativement ; cette bibliothèque pèse ≈5,7 kB min+gzip et laisse le défilement à la plateforme, donc il n'y a pas de saccade d'hydratation — le rail défile avant même le chargement de votre JavaScript, ce qui signifie aussi qu'il fonctionne dans le HTML rendu côté serveur que voient vos robots d'indexation. Cette page elle-même en est la preuve rendue côté serveur : la démo ci-dessus défile avec JavaScript désactivé.

La [page de comparaison](https://react-horizontal-scrolling-menu.dev/fr/compare.md) contient le tableau complet face à Swiper, Embla, keen-slider et react-slick.

## Le suivi de visibilité est une fonctionnalité de vitrine

La visibilité par élément ressemble à un détail d'implémentation jusqu'à ce que vous la rapprochiez du merchandising :

-   **Images paresseuses** — affichez une vignette d'espace réservé jusqu'à ce que `useIsVisible` signale qu'elle est à l'écran.
-   **Analytique d'impressions** — `getVisible()` (en direct dans la [démo héro](https://react-horizontal-scrolling-menu.dev/fr.md) de la page d'accueil) vous indique exactement quelles catégories ont été vues, pas seulement que le rail s'est rendu.
-   **Flèches conscientes des bords** — se désactivent ou se masquent aux véritables extrémités, même après le chargement asynchrone de catégories, comme dans l'[exemple d'ajout d'éléments](https://react-horizontal-scrolling-menu.dev/fr/examples/add-items.md).

## Adaptez-le à votre système de design

Les vignettes sont vos composants — cartes images, cercles, pastilles de texte — chacune portant un `itemId`. La hauteur et la largeur viennent de votre CSS ; le menu n'impose aucune dimension. Avancez d'un élément à la fois comme un slider produit avec [one-item-scroll](https://react-horizontal-scrolling-menu.dev/fr/examples/one-item-scroll.md), affichez un [indicateur de progression](https://react-horizontal-scrolling-menu.dev/fr/examples/progress.md) de défilement, ou livrez-le en RTL pour les boutiques arabes et hébraïques avec l'[exemple RTL](https://react-horizontal-scrolling-menu.dev/fr/examples/rtl.md) — le rail est de la composition, pas de la configuration.

## Le motif, minimal

Des vignettes avec un `itemId`, des flèches issues des hooks de visibilité — le rail complet fait moins de quarante lignes.

CategoryRail.tsx

```
function CategoryRail({ categories }: { categories: Category[] }) {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {categories.map((category) => (
        <CategoryTile itemId={category.id} key={category.id} {...category} />
      ))}
    </ScrollMenu>
  );
}

function CategoryTile({ itemId, name, image }: CategoryTileProps) {
  // Lazy images for free: placeholders until the tile is on screen.
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isVisible = visibility.useIsVisible(itemId, false);
  return (
    <a href={`/category/${itemId}`} className="rail-tile">
      {isVisible ? <img src={image} alt="" /> : <div className="ph" />}
      <span>{name}</span>
    </a>
  );
}

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

## Ou installez-le comme composant shadcn

L'élément de registre de base [scroll-menu](https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json) est ce rail — flèches stylées shadcn, glisser pour défiler, barre de défilement masquée — installé dans votre `components/ui/` et stylé par vos tokens :

shadcn

```
npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json
```

## Exemples associés

-   [DémarrageLe menu minimal : éléments, deux flèches, visibilité prête à l’emploi.](https://react-horizontal-scrolling-menu.dev/fr/examples/simple.md)
-   [Défiler un élément à la foisLes flèches avancent d’un seul élément au lieu d’une page entière.](https://react-horizontal-scrolling-menu.dev/fr/examples/one-item-scroll.md)
-   [Indicateur de progression du défilementUne barre de progression pilotée par les éléments visibles.](https://react-horizontal-scrolling-menu.dev/fr/examples/progress.md)

[Tous les exemples (21)](https://react-horizontal-scrolling-menu.dev/fr/examples.md)

---

More examples: <https://react-horizontal-scrolling-menu.dev/examples.md>
Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>