DEV Community

Cover image for React Fast Marquee
Marek Gacek
Marek Gacek

Posted on • Originally published at blog.marekgacekdev.pl

1

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
Enter fullscreen mode Exit fullscreen mode

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

import Marquee from "react-fast-marquee";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

and thats looks great.

Image description

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!