--- title: "Fila horizontal estilo Netflix en React" description: "Crea una fila de categorías estilo Netflix en React con scroll nativo: flechas al pasar el cursor, desvanecido en los bordes, arrastre para desplazar y seguimiento de visibilidad. Demo en vivo y código completo." canonical: "https://react-horizontal-scrolling-menu.dev/es/netflix-row" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- # Fila horizontal estilo Netflix en React La fila de pósters que recorres en cualquier plataforma de streaming no es un carrusel: es un menú. Nada encaja a la fuerza, nada se reproduce solo; usa el desplazamiento nativo con inercia, con flechas superpuestas encima. Eso es exactamente lo que ofrece `react-horizontal-scrolling-menu`: tus tarjetas, scroll nativo y visibilidad por elemento para que las flechas sepan cuándo ocultarse. Sci-Fi Comedy Drama Horror Docs Kids Action Indie Anime Classics Thriller Reality Arrástrala o pasa el cursor sobre la fila: las flechas aparecen sobre los bordes y cada una desaparece cuando se llega a ese extremo de la fila. [Edita este ejemplo en vivo en Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-mousedrag--mouse-drag) ## Por qué esto no es tarea de un carrusel Una fila estilo Netflix nunca muestra una sola diapositiva a la vez. Los elementos se cortan a propósito en los bordes: el póster cortado es la señal de que "hay más". Los motores de carrusel luchan contra esto: controlan la capa de gestos con transformaciones de JavaScript, encajan en los límites de cada diapositiva y reimplementan la inercia que el navegador de tus usuarios ya tiene. En una fila de tarjetas pulsables, todo eso es sobrecarga innecesaria. El scroll nativo te da inercia, tacto, trackpad y barra de desplazamiento gratis. Las dos cosas que no te da son las flechas superpuestas y saber qué tarjetas están en pantalla, y esas son justo las dos cosas que añade esta librería, mediante [`useIsVisible`](https://react-horizontal-scrolling-menu.dev/es/examples/simple.md) por elemento y un estado de flechas consciente de los bordes. ## Los tres detalles que venden el efecto - **Las flechas se superponen al contenido**, no van al lado. Renderízalas con posición absoluta sobre los extremos de la fila (la demo de arriba las pasa a través de `Header` para que permanezcan dentro del contexto del menú), muéstralas al pasar el cursor y oculta cada una cuando [`useLeftArrowVisible` / `useRightArrowVisible`](https://react-horizontal-scrolling-menu.dev/es/examples/simple.md) indiquen que se ha llegado a ese extremo de la fila. - **Los bordes se desvanecen.** Una línea de CSS —un gradiente `mask-image` en el contenedor de scroll— sustituye la lógica de "asomo" que los plugins de carrusel incluyen para esto. - **El arrastre no debe disparar clics.** Un arrastre de ratón que termina sobre un póster no debe abrirlo. La [receta de arrastre para desplazar](https://react-horizontal-scrolling-menu.dev/es/examples/mouse-drag.md) sigue el estado del arrastre y suprime justo ese clic. ## Escalarlo: filas diferidas y rieles largos Las interfaces de streaming apilan docenas de filas con cientos de tarjetas. Como los elementos son DOM normal dentro de un contenedor de scroll nativo, nada se vuelve a renderizar al desplazarse: el [ejemplo de rendimiento](https://react-horizontal-scrolling-menu.dev/es/examples/performance.md) mueve 300 elementos sin virtualización. La visibilidad por elemento también te da carga diferida de imágenes gratis: renderiza un marcador de posición hasta que `useIsVisible` indique que la tarjeta está en pantalla. Si tu fila debe dar la vuelta al llegar al final, ese es el único caso en el que la semántica de diapositivas realmente ayuda: consulta la [receta de bucle infinito](https://react-horizontal-scrolling-menu.dev/es/examples/infinite-loop.md) para la versión de ~60 líneas hecha a mano, antes de recurrir a un motor de carrusel. ## El patrón, en su forma mínima Superpón flechas sobre una fila de scroll nativo: la demo de arriba es esta misma estructura más estilos. El código completo, listo para usar, con arrastre y desvanecido en los bordes, se distribuye como el componente shadcn de abajo. 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); */ ``` ## O instálalo como componente shadcn El elemento del registro [media-row](https://react-horizontal-scrolling-menu.dev/r/media-row.json) es exactamente este patrón —flechas al pasar el cursor, desvanecido con gradiente en los bordes, arrastre para desplazar— como componente con estilos Tailwind en tu `components/ui/`, listo para que lo edites: shadcn ``` npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/media-row.json ``` ## Ejemplos relacionados - [Arrastrar para desplazarse con el ratónArrastre con el ratón que sigue dejando funcionar los clics.](https://react-horizontal-scrolling-menu.dev/es/examples/mouse-drag.md) - [Bucle infinitoBucle continuo desde la API pública — sin cambios en la biblioteca.](https://react-horizontal-scrolling-menu.dev/es/examples/infinite-loop.md) - [5.000 elementos y sigue siendo rápidoEl desplazamiento nativo escala — aquí no hace falta virtualización.](https://react-horizontal-scrolling-menu.dev/es/examples/performance.md) [Todos los ejemplos (21)](https://react-horizontal-scrolling-menu.dev/es/examples.md) --- More examples: Library summary for LLMs: