--- title: "Rangée horizontale façon Netflix en React" description: "Créez une rangée de catégories façon Netflix en React avec défilement natif : flèches au survol, fondu des bords, glisser pour défiler, suivi de visibilité. Démo et code source complets." canonical: "https://react-horizontal-scrolling-menu.dev/fr/netflix-row" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- # Rangée horizontale façon Netflix en React La rangée d'affiches que vous parcourez sur chaque site de streaming n'est pas un carrousel — c'est un menu. Rien ne s'aligne, rien ne se lance automatiquement ; elle repose sur le défilement natif à inertie, avec des flèches superposées par-dessus. C'est exactement ce que fournit `react-horizontal-scrolling-menu` : vos cartes, le défilement natif, et une visibilité par élément pour que les flèches sachent quand se cacher. Sci-Fi Comedy Drama Horror Docs Kids Action Indie Anime Classics Thriller Reality Faites-la glisser, ou survolez la rangée — les flèches apparaissent en fondu sur les bords, et chacune disparaît quand son extrémité de la rangée est atteinte. [Modifier cet exemple en direct dans Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-mousedrag--mouse-drag) ## Pourquoi ce n'est pas un travail de carrousel Une rangée Netflix n'affiche jamais une seule diapositive à la fois. Les éléments sont volontairement coupés en partie sur les bords — l'affiche tronquée est l'indice visuel qui dit « il y en a plus ». Les moteurs de carrousel luttent contre cela : ils s'approprient la couche de gestes avec des transformations JavaScript, s'alignent sur des limites de diapositives, et réimplémentent l'inertie que les navigateurs de vos utilisateurs possèdent déjà. Sur une rangée de cartes cliquables, tout cela est superflu. Le défilement natif vous donne l'inertie, le tactile, le trackpad et la barre de défilement gratuitement. Les deux choses qu'il ne vous donne pas sont les flèches superposées et le fait de savoir quelles cartes sont à l'écran — et ce sont justement les deux choses qu'ajoute cette bibliothèque, via [`useIsVisible`](https://react-horizontal-scrolling-menu.dev/fr/examples/simple.md) par élément et un état des flèches conscient des bords. ## Les trois détails qui vendent l'effet - **Les flèches se superposent au contenu**, elles ne sont pas à côté. Positionnez-les en absolu par-dessus les extrémités de la rangée (la démo ci-dessus les fait passer par `Header` pour qu'elles restent dans le contexte du menu), affichez-les au survol, et masquez chacune quand [`useLeftArrowVisible` / `useRightArrowVisible`](https://react-horizontal-scrolling-menu.dev/fr/examples/simple.md) signalent que cette extrémité de la rangée est atteinte. - **Les bords s'estompent en fondu.** Une seule ligne de CSS — un dégradé `mask-image` sur le conteneur de défilement — remplace la logique d'« aperçu » que les plugins de carrousel embarquent pour cela. - **Le glisser ne doit pas déclencher de clics.** Un glisser de souris qui se termine sur une affiche ne doit pas l'ouvrir. La [recette de glisser pour défiler](https://react-horizontal-scrolling-menu.dev/fr/examples/mouse-drag.md) suit l'état du glisser et absorbe exactement ce clic. ## Faire monter en charge : rangées paresseuses et longs rails Les interfaces de streaming empilent des dizaines de rangées avec des centaines de cartes. Comme les éléments sont du DOM ordinaire dans un conteneur de défilement natif, rien ne se re-rend au défilement — l'[exemple de performance](https://react-horizontal-scrolling-menu.dev/fr/examples/performance.md) fait tourner 300 éléments sans virtualisation. La visibilité par élément offre aussi le chargement paresseux d'images gratuitement : affichez un espace réservé jusqu'à ce que `useIsVisible` signale que la carte est à l'écran. Si votre rangée doit boucler à la fin, c'est le seul endroit où la sémantique des diapositives aide vraiment — voir la [recette de boucle infinie](https://react-horizontal-scrolling-menu.dev/fr/examples/infinite-loop.md) pour la version côté application d'environ 60 lignes, avant de vous tourner vers un moteur de carrousel. ## Le motif, minimal Superposez des flèches sur une rangée à défilement natif — la démo ci-dessus, c'est cette structure plus le style. Le code source complet, prêt à l'emploi, avec glisser et fondu des bords, est fourni ci-dessous comme composant shadcn. MediaRow.tsx ``` function MediaRow({ children }: { children: React.ReactNode }) { return (
} wrapperClassName="edge-fade"> {children}
); } // Rendered as Header, so it lives inside the menu's VisibilityContext // and can sit absolutely positioned over the row ends. function OverlayArrows() { const api = React.useContext(VisibilityContext); const atStart = api.useLeftArrowVisible(); const atEnd = api.useRightArrowVisible(); return ( <> ); } /* .edge-fade — the Netflix edge, one CSS line: mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); */ ``` ## Ou installez-le comme composant shadcn L'élément de registre [media-row](https://react-horizontal-scrolling-menu.dev/r/media-row.json) est exactement ce motif — flèches au survol, fondu des bords en dégradé, glisser pour défiler — sous forme de composant stylé avec Tailwind dans votre `components/ui/`, à vous de l'éditer : shadcn ``` npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/media-row.json ``` ## Exemples associés - [Glisser pour défiler à la sourisUn glisser à la souris qui laisse les clics fonctionner.](https://react-horizontal-scrolling-menu.dev/fr/examples/mouse-drag.md) - [Boucle infinieBoucle continue depuis l’API publique — sans changement dans la bibliothèque.](https://react-horizontal-scrolling-menu.dev/fr/examples/infinite-loop.md) - [5 000 éléments et toujours rapideLe défilement natif s’adapte — pas besoin de virtualisation ici.](https://react-horizontal-scrolling-menu.dev/fr/examples/performance.md) [Tous les exemples (21)](https://react-horizontal-scrolling-menu.dev/fr/examples.md) --- More examples: Library summary for LLMs: