Tutorial: Create Infinite Scrolling Marquee in React

A marquee is a great way to display text, images, or videos in a continuous loop.

In this tutorial, we'll create a simple and customizable infinite scrolling marquee component in React.

Setting Up the React Project

First, ensure you have Node.js and npm installed. If not, download and install them from Node.js.

Start the development server:

npm start

Create a new React project:

npx create-react-app react-marquee
cd react-marquee

Create the Marquee Component

Now, let's create a marquee component that can scroll text, images, or videos infinitely.

Define the Marquee component:

const Marquee = ({ children, speed = 50, direction = 'left' }) => {
    return (
        <div className="marquee-container">
            <div
                className="marquee"
                style={{
                    animationDuration: `${speed}s`,
                    animationDirection: direction,
                }}
            >
                {children}
            </div>
        </div>
    );
};

export default Marquee;

Open Marquee.js and start by importing the necessary dependencies:

import React from 'react';
import './Marquee.css'; // We will define styles here later.

Inside your src folder, create a new file named Marquee.js:

touch src/Marquee.js

Add CSS for Scrolling Effect

Next, let's add the CSS to create the infinite scrolling effect.

Open Marquee.css and add the following styles:

.marquee-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

Inside the src folder, create a new CSS file named Marquee.css:

touch src/Marquee.css

Use the Marquee Component

Now that we've created the Marquee component, let's use it in our App.js file.

1. Add some sample images to your public directory or use URLs for testing.

Open App.js and replace its content with the following:

import React from 'react';
import Marquee from './Marquee';

function App() {
    return (
        <div className="App">
            <Marquee speed={10}>
                <img src="image1.png" alt="Image 1" />
                <img src="image2.png" alt="Image 2" />
                <img src="image3.png" alt="Image 3" />
            </Marquee>

            <Marquee speed={15} direction="right">
                <p>This is an infinite scrolling text marquee!</p>
            </Marquee>
        </div>
    );
}

export default App;

Run Your Application

Now, run your application using:

npm start

You should see your infinite scrolling marquee in action!

Customization

• Speed: Adjust the speed prop to control how fast the marquee scrolls. The value is in seconds.
• Direction: Use the direction prop to scroll left or right ('left' or 'right').
• Content: You can add any type of content inside the marquee component, including text, images, or videos.

End Note

You now have a basic but flexible React marquee component. You can further enhance it by adding more customization options, like pause on hover, vertical scrolling, or different animations.

This component can be easily integrated into your React projects to create engaging scrolling elements.