react-marquee-ticker

A 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

🚀 Basic Usage

``jsx
import Ticker from 'react-marquee-ticker';

items={[
'Short notice',
'This is a very long notice that will scroll horizontally when overflowed'
]}
itemHeight="60px"
/>
`

The above is equivalent to:

`jsx

Short notice
This is a very long notice that will scroll horizontally when overflowed.

`

> ⚠️ When the items prop is provided, children will be ignored

🎮 Demo

👉 https://superRaytin.github.io/react-marquee-ticker/

📦 Installation

`bash


yarn

| 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



- 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 behavior

If you need Item / Mask / Text composition or automatic marquee behavior, please use the modern entry with React 16.8+`.

License

MIT, see the LICENSE file for detail.