React Seamless Scroll

English | 简体中文

A modern React seamless scrolling component with perfect support for both horizontal and vertical scrolling. Built with TypeScript, featuring smooth scrolling effects, flexible configuration options, and complete type support.

🌐 Demo

Check out the live demo: React Seamless Scroll Demo

✨ Features

- 🔄 Perfect seamless scrolling without gaps
- ↔️ Horizontal and vertical scrolling
- 🎯 Customizable scroll speed
- 🔁 Support for forward and reverse scrolling
- ⏯️ Hover pause support
- 🖱️ Click event handling
- 🎨 Flexible style customization
- 📱 Responsive design
- 🚀 Written in TypeScript for type safety
- 🔥 Built with React 18+
- 📦 Zero dependencies (except React)
- ⚡️ Transform-based implementation for superior performance

📦 Installation

``bash
npm install react-marquee-order


or

pnpm add react-marquee-order

or

yarn add react-marquee-order
`

🚀 Usage

`tsx
import React, { useRef } from 'react';
import { Marquee, MarqueeHandle } from 'react-marquee-order';

const App = () => {
const marqueeRef = useRef(null);

const data = [
{ text: "Seamless scroll item 1" },
{ text: "Seamless scroll item 2" },
{ text: "Seamless scroll item 3" }
];

const handleClick = (item: any, index: number) => {
console.log('Clicked:', item, 'at index:', index);
};

return (


);
};

export default App;
`

📖 API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| loopData | Array | [] | Data array for continuous scrolling |
| direction | 'horizontal' \| 'vertical' | 'horizontal' | Scroll direction: horizontal/vertical |
| speed | number | 2 | Scroll speed (pixels per frame) |
| reverse | boolean | false | Whether to scroll in reverse |
| hoverPause | boolean | true | Whether to pause on hover |
| onClick | (item: any, index: number) => void | - | Callback function for item clicks |

$3

The component exposes these methods via ref:

- play(): Start scrolling
- pause(): Pause scrolling
- reset()`: Reset position

🚨 v2.0.0 Updates

- 🆙 Upgraded to React 18
- 📝 Migrated to TypeScript with full type support
- 🛠️ Upgraded build tool to Vite
- ⚡️ Optimized scrolling algorithm for smoother experience
- 🎯 Improved API design with better type support

🌐 Browser Support

Supports all modern browsers and IE11+ with appropriate polyfills.

🤝 Contributing

Pull requests are welcome to improve this component!

📄 License

MIT