React Fast Marquee

Create Smooth Marquees with React Fast Marquee

This article introduces React Fast Marquee, a simple yet powerful component for creating smoothly scrolling marquees. It's incredibly easy to integrate, even with Next.js.

Installation

Installation is straightforward:

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

Import the component:

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

Usage

Simply wrap your content within the <Marquee> tags. This can be text, single React components, or multiple components.

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

React Fast Marquee provides numerous customizable props, including className, autoFill, loop, gradient, and more. Refer to the component's documentation and demo for detailed usage instructions.

Example: Branding Showcase

Here's how React Fast Marquee was used to create a brand showcase on a gastronomy equipment website:

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

The result is a visually appealing, smoothly scrolling brand display.

The above is the detailed content of React Fast Marquee. For more information, please follow other related articles on the PHP Chinese website!