React Fast Marquee

Create Smooth Marquees with React Fast Marquee

Today, I want to introduce you to an awesome component for creating silky smooth marquees. With this package, you can set them up super quickly! Although it works perfectly with Next.js, let me present to you React Fast Marquee.

Installation

Installation is a piece of cake! Simply add it with the following command:

npm install react-fast-marquee --save

Next, we need to import the component in the place where we want to use it:

import Marquee from "react-fast-marquee";

Finally, wrap the <Marquee> tags around any component or text you'd like to slide.

<Marquee>
  I can be a React component, multiple React components, or just some text.
</Marquee>

And that's it. You're all set! Of course, React Fast Marquee comes with lots of props like className, autoFill, loop, gradient, and more. They're all super easy to use. I encourage you to check out the short documentation and demo—it explains everything better than I ever could.

To wrap things up, let me show you how I used this component to create a looping showcase of brands on a gastronomy equipment website.

const brands = [
    {
        id: 1,
        name: 'ecolab',
        logo: '/brands/ecolab.webp',
    },
    ...
    ]


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

and thats looks great.