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 tags around any component or text you'd like to slide. I can be a React component, multiple React components, or just some text. 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 ( {brands.map(brand => ( ))} ) } and thats looks great.
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 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.
