Schnell reagieren. Marquee

Erstellen Sie glatte Marquees mit React Fast Marquee

In diesem Artikel wird React Fast Marquee vorgestellt, eine einfache, aber leistungsstarke Komponente zum Erstellen reibungslos scrollender Marquees. Die Integration ist unglaublich einfach, sogar mit Next.js.

Installation

Die Installation ist unkompliziert:

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

Komponente importieren:

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

Verwendung

Verbinden Sie Ihren Inhalt einfach mit den <Marquee>-Tags. Dies kann Text, einzelne React-Komponenten oder mehrere Komponenten sein.

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

React Fast Marquee bietet zahlreiche anpassbare Requisiten, darunter className, autoFill, loop, gradient und mehr. Ausführliche Gebrauchsanweisungen finden Sie in der Dokumentation und Demo der Komponente.

Beispiel: Branding Showcase

So wurde React Fast Marquee verwendet, um eine Markenpräsentation auf einer Website für Gastronomiegeräte zu erstellen:

<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>

Das Ergebnis ist eine optisch ansprechende, flüssig scrollende Markendarstellung.

Das obige ist der detaillierte Inhalt vonSchnell reagieren. Marquee. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!