A lightweight React component for vertically looping texts, with optional horizontal marquee animation when content overflows.
npm install react-marquee-tickerA lightweight React component for vertically looping texts, with optional horizontal marquee animation when content overflows.
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]
[npm-url]: https://npmjs.org/package/react-marquee-ticker
[downloads-image]: http://img.shields.io/npm/dm/react-marquee-ticker.svg
[npm-image]: http://img.shields.io/npm/v/react-marquee-ticker.svg
``jsx
import Ticker from 'react-marquee-ticker';
'Short notice',
'This is a very long notice that will scroll horizontally when overflowed'
]}
itemHeight="60px"
/>
`
The above is equivalent to:
`jsx`
> ⚠️ When the items prop is provided, children will be ignored
👉 https://superRaytin.github.io/react-marquee-ticker/
`bashyarn
yarn add react-marquee-ticker
🧩 Props
| Prop | Type | Default | Description |
|----|----|----|----|
|
items | | [] | List of ticker items |
| placeholder | string | - | Text shown when items is empty |
| itemHeight | string | required | Height of each item (e.g. "47px") |
| style | React.CSSProperties | - | Inline styles for the container |
| className | string | - | Container class name |
| singleLine | boolean | false | Enable single-line mode with ellipsis (nowrap + ellipsis). Only works when autoMarquee={false} |
| interval | number | 3000 | Stay duration for each item (ms) |
| speed | number | 400 | Vertical scroll speed (ms) |
| paused | boolean | false | Pause vertical scrolling |$3
> Only works when text width exceeds the container width.
| Prop | Type | Default | Description |
|----|----|----|----|
|
autoMarquee | boolean | true | Enable horizontal marquee when text overflows |
| marqueeSpeed | number | 30 | Horizontal scroll speed (px/s) |
| marqueeDelayBeforeScroll | number | 0 | Delay before horizontal scrolling starts (ms) |
| marqueeDelayAfterScroll | number | 0 | Delay after horizontal scrolling ends (ms) |$3
> Slots are render functions returning
ReactNode.| Prop | Type | Description |
|----|----|----|
|
prefix | () => ReactNode | Content rendered before the text |
| suffix | () => ReactNode | Content rendered after the text |Example:
`tsx
// ...
prefix={() => 🔔}
suffix={() => NEW}
/>
`$3
| Prop | Type | Description |
|----|----|----|
|
children | ReactElement[] | Alternative way to provide items |When
autoMarquee is enabled and the content may exceed the container width, it is recommended to use the Mask + Text structure to ensure horizontal scrolling works correctly:`jsx
Short notice
This is a very long notice that will scroll horizontally when overflowed.
See Details
`#### Structure Overview
`jsx
// Defines the visible clipping area
// The actual horizontally scrolling content
`-
Mask controls the visible area (typically overflow: hidden)
- Text is the element that participates in horizontal animation
- The component measures the actual width of Text to calculate scroll distance and duration automatically
🕰️ Legacy React Support
For very old React versions before hooks (for example React 0.14.x), this package provides a legacy entry:
`ts
import MarqueeTicker from 'react-marquee-ticker/legacy'
`$3
The legacy build is intentionally minimal and stable:
- ❌ No Hooks
- ❌ No
Item / Mask / Text sub components
- ❌ No compound component API
- ✅ Basic children or items usage$3
When using children mode in legacy React, you must provide plain DOM structure. Only the following pattern is supported:
`jsx
content 1
content 2
`Notes:
- The component does not validate or transform children in legacy mode
- Class names (
ticker-item, ticker-mask, ticker-text) are required for layout and scrolling
- Any other structure may result in undefined behaviorIf you need
Item / Mask / Text composition or automatic marquee behavior, please use the modern entry with React 16.8+`.MIT, see the LICENSE file for detail.