Pause on hover support?

[tiwka19]

No description provided.

[tjenkinson]

Hey you should be able to wrap the marque element in a <div />, add onMouseEnter/onMouseLeave event listeners to that and set the rate to 0 to pause.

[tiwka19]

Hey you should be able to wrap the marque element in a <div />, add onMouseEnter/onMouseLeave event listeners to that and set the rate to 0 to pause.

Thanks!

[tjenkinson]

No problem let me know if there are any issues

[somethingxdev]

No problem let me know if there are any issues

Im get an error in console
Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

Here is the code for my component

import { useState } from 'react'
import { Marquee } from 'dynamic-marquee-react'
const MarqueeBrands = (props) => {
	const [rate, setRate] = useState(30)
	return (
		<div onMouseEnter={() => setRate(0)} onMouseLeave={() => setRate(30)}>
			<Marquee startOnScreen={true} rate={rate}>
				<div className="flex items-center justify-between">{props.first}</div>
			</Marquee>
			{props.second && (
				<Marquee startOnScreen={true} rate={-rate}>
					<div className="mt-4 flex items-center justify-between">{props.second}</div>
				</Marquee>
			)}
		</div>
	)
}

export default MarqueeBrands

[tjenkinson]

Hmm that looks like it should be fine. Can you reproduce the error on https://stackblitz.com/ ?