Réagissez rapidement

Créez des chapiteaux fluides avec React Fast Marquee

Cet article présente React Fast Marquee, un composant simple mais puissant pour créer des chapiteaux à défilement fluide. C'est incroyablement facile à intégrer, même avec Next.js.

Installation

L'installation est simple :

<code class="language-bash">npm install react-fast-marquee --save</code>

Importer le composant :

<code class="language-javascript">import Marquee from "react-fast-marquee";</code>

Utilisation

Enveloppez simplement votre contenu dans les balises <Marquee>. Il peut s'agir de texte, de composants React uniques ou de plusieurs composants.

<code class="language-javascript"><Marquee>
  This is my marquee text.  It will scroll smoothly!
</Marquee></code>

React Fast Marquee fournit de nombreux accessoires personnalisables, notamment className, autoFill, loop, gradient et bien plus encore. Reportez-vous à la documentation et à la démo du composant pour obtenir des instructions d'utilisation détaillées.

Exemple : Vitrine de marque

Voici comment React Fast Marquee a été utilisé pour créer une vitrine de marque sur un site internet d'équipement gastronomique :

<code class="language-javascript">const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    // ... more brands
    ];


const MarqueeBrands = () => {
    return (
        <Marquee>
            {brands.map(brand => (
                <img alt={brand.name} className="w-[100px] sm:w-[150px] md:w-[200px] h-[70px] sm:h-[75px] md:h-[100px] object-contain mx-4 md:mx-6" height={100} key={brand.name} quality={50} sizes="(max-width: 768px) 150px, 200px" src={brand.logo} width={200} />
            ))}
        </Marquee>
    )
}</code>

Le résultat est un affichage de marque visuellement attrayant et à défilement fluide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!