--- title: "Linha horizontal estilo Netflix em React" description: "Crie uma linha de categorias estilo Netflix em React com rolagem nativa: setas ao passar o mouse, fade nas bordas, arraste para rolar, rastreamento de visibilidade. Demo ao vivo e código-fonte completo." canonical: "https://react-horizontal-scrolling-menu.dev/pt-br/netflix-row" image: "https://react-horizontal-scrolling-menu.dev/og.png" --- # Linha horizontal estilo Netflix em React A fileira de pôsteres que você percorre em qualquer site de streaming não é um carrossel — é um menu. Nada se encaixa (snap), nada toca automaticamente; ela usa a rolagem nativa com inércia (momentum), com setas sobrepostas por cima. É exatamente isso que o `react-horizontal-scrolling-menu` entrega: seus cards, rolagem nativa e visibilidade por item para que as setas saibam quando se esconder. Sci-Fi Comedy Drama Horror Docs Kids Action Indie Anime Classics Thriller Reality Arraste, ou passe o mouse sobre a fileira — as setas aparecem gradualmente nas bordas, e cada uma desaparece quando aquele extremo da fileira é alcançado. [Edite este exemplo ao vivo no Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-mousedrag--mouse-drag) ## Por que isso não é trabalho para um carrossel Uma fileira estilo Netflix nunca mostra um slide por vez. Os itens são propositalmente cortados nas bordas — o pôster cortado é o indício visual que diz "tem mais". Motores de carrossel lutam contra isso: eles assumem a camada de gestos com transformações em JavaScript, encaixam (snap) nos limites dos slides e reimplementam a inércia que o navegador do usuário já tem. Em uma fileira de cards clicáveis, tudo isso é overhead. A rolagem nativa te dá inércia, toque, trackpad e barra de rolagem de graça. As duas coisas que ela não te dá são as setas sobrepostas e saber quais cards estão na tela — e são exatamente essas duas coisas que esta biblioteca adiciona, via [`useIsVisible`](https://react-horizontal-scrolling-menu.dev/pt-br/examples/simple.md) por item e um estado de seta sensível às bordas. ## Os três detalhes que vendem o efeito - **As setas se sobrepõem ao conteúdo**, elas não ficam ao lado dele. Renderize-as com posicionamento absoluto sobre as extremidades da fileira (a demo acima as passa através de `Header` para que fiquem dentro do contexto do menu), mostre-as ao passar o mouse e esconda cada uma quando [`useLeftArrowVisible` / `useRightArrowVisible`](https://react-horizontal-scrolling-menu.dev/pt-br/examples/simple.md) informar que aquele extremo da fileira foi alcançado. - **As bordas desaparecem em gradiente.** Uma linha de CSS — um gradiente `mask-image` no contêiner de rolagem — substitui a lógica de "espiada" que os plugins de carrossel embutem para isso. - **O arraste não pode disparar cliques.** Um arraste de mouse que termina sobre um pôster não pode abri-lo. A [receita de arraste para rolar](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mouse-drag.md) rastreia o estado do arraste e engole exatamente esse clique. ## Escalando: fileiras preguiçosas e trilhas longas Interfaces de streaming empilham dezenas de fileiras com centenas de cards. Como os itens são DOM comum dentro de um contêiner de rolagem nativa, nada é renderizado novamente durante a rolagem — o [exemplo de performance](https://react-horizontal-scrolling-menu.dev/pt-br/examples/performance.md) roda 300 itens sem virtualização. A visibilidade por item também te dá lazy-loading de imagens de graça: renderize um placeholder até que `useIsVisible` informe que o card está na tela. Se a sua fileira precisa dar a volta no final, esse é o único lugar em que a semântica de slides realmente ajuda — veja a [receita de loop infinito](https://react-horizontal-scrolling-menu.dev/pt-br/examples/infinite-loop.md) para a versão userland de ~60 linhas antes de recorrer a um motor de carrossel. ## O padrão, no mínimo Setas sobrepostas em uma fileira de rolagem nativa — a demo acima é essa estrutura mais estilização. O código-fonte completo, pronto para uso, com arraste e fade nas bordas, vem como o componente shadcn abaixo. 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 instale como um componente shadcn O item de registro [media-row](https://react-horizontal-scrolling-menu.dev/r/media-row.json) é exatamente esse padrão — setas ao passar o mouse, fade em gradiente nas bordas, arraste para rolar — como um componente estilizado com Tailwind no seu `components/ui/`, seu para editar: shadcn ``` npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/media-row.json ``` ## Exemplos relacionados - [Arrastar para rolar com o mouseArraste com o mouse que ainda deixa os cliques funcionarem.](https://react-horizontal-scrolling-menu.dev/pt-br/examples/mouse-drag.md) - [Loop infinitoLoop contínuo a partir da API pública — sem mudanças na biblioteca.](https://react-horizontal-scrolling-menu.dev/pt-br/examples/infinite-loop.md) - [5.000 itens e ainda rápidoA rolagem nativa escala — sem necessidade de virtualização aqui.](https://react-horizontal-scrolling-menu.dev/pt-br/examples/performance.md) [Todos os exemplos (21)](https://react-horizontal-scrolling-menu.dev/pt-br/examples.md) --- More examples: Library summary for LLMs: