React Fast Marquee

Buat Marquee Smooth dengan Marquee React Fast

Artikel ini memperkenalkan React Fast Marquee, komponen yang ringkas namun berkuasa untuk mencipta marquee tatal yang lancar. Ia amat mudah untuk disepadukan, walaupun dengan Next.js.

Pemasangan

Pemasangan adalah mudah:

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

Import komponen:

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

Penggunaan

Hanya bungkus kandungan anda dalam tag <Marquee>. Ini boleh menjadi teks, komponen React tunggal atau berbilang komponen.

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

React Fast Marquee menyediakan pelbagai prop yang boleh disesuaikan, termasuk className, autoFill, loop, gradient dan banyak lagi. Rujuk dokumentasi dan demo komponen untuk arahan penggunaan terperinci.

Contoh: Pameran Penjenamaan

Begini cara React Fast Marquee digunakan untuk mencipta pameran jenama di tapak web peralatan gastronomi:

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

Hasilnya ialah paparan jenama yang menarik secara visual, menatal dengan lancar.

Atas ialah kandungan terperinci React Fast Marquee. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!