Package Exports

react-css-marquee

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-css-marquee) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React CSS Marquee

Live demo →

A lightweight React marquee component powered by CSS animations. Supports horizontal and vertical scrolling, gradient fade edges, pause controls, auto-fill, loop count, and more -- with zero dependencies.

Install

npm install react-css-marquee

Quick start

import { Marquee } from 'react-css-marquee'

<Marquee>
  <img src="logo1.png" />
  <img src="logo2.png" />
  <img src="logo3.png" />
</Marquee>

Examples

Gradient fade edges

Uses CSS mask-image so it works over any background without specifying a color.

<Marquee gradient gradientWidth={200}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Marquee>

Vertical scrolling

<Marquee direction="vertical" style={{ height: 400 }}>
  <p>Line one</p>
  <p>Line two</p>
  <p>Line three</p>
</Marquee>

Sparse scrolling (no repeat)

Items scroll across individually without duplicating to fill the viewport.

<Marquee repeat={false} speed={8}>
  <h2>Breaking news headline</h2>
</Marquee>

Pause on hover

<Marquee isPausedOnHover>
  <Card />
  <Card />
  <Card />
</Marquee>

Drag to scroll

Let users grab and scrub through the marquee content. The animation resumes from where the user left off.

<Marquee draggable>
  <img src="photo1.jpg" />
  <img src="photo2.jpg" />
  <img src="photo3.jpg" />
</Marquee>

Click to toggle pause

<Marquee isPausedOnClick>
  <span>Click anywhere on the marquee to pause / resume</span>
</Marquee>

Finite loop with callback

<Marquee loop={3} onFinish={() => console.log('done')}>
  <span>This plays 3 times</span>
</Marquee>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	--	Content to scroll
`className`	`string`	--	CSS class for the container element
`delay`	`number`	`0`	Delay before animation starts, in seconds
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll direction
`draggable`	`boolean`	`false`	Let users grab and drag to scrub through the marquee. Animation resumes on release
`repeat`	`boolean`	`true`	Duplicate children to fill the viewport for a seamless loop. Set `false` for spaced-out items that scroll across individually
`gap`	`number`	`40`	Gap between items in pixels
`gradient`	`boolean`	`false`	Fade out edges with a gradient overlay
`gradientWidth`	`number \| string`	`200`	Width of the gradient fade zone (number for px, string for any CSS unit)
`isPaused`	`boolean`	`false`	Pause the animation
`isPausedOnClick`	`boolean`	`false`	Click the marquee to toggle between paused and running
`isPausedOnHover`	`boolean`	`false`	Pause when hovering over the marquee
`isPausedOnMouseDown`	`boolean`	`false`	Pause while the mouse button is held down on the marquee
`loop`	`number`	`0`	Number of times to play the animation. `0` means infinite
`onCycleComplete`	`() => void`	--	Called each time the animation completes one cycle
`onFinish`	`() => void`	--	Called when a finite loop animation ends
`reverse`	`boolean`	`false`	Reverse the scroll direction
`speed`	`number`	`10`	Animation duration in seconds (higher = slower)
`style`	`CSSProperties`	--	Inline styles for the container element

Accessibility

The component automatically pauses animation when the user has prefers-reduced-motion: reduce enabled. Duplicate items rendered for the seamless loop are marked with aria-hidden to prevent screen readers from reading them multiple times.

License

MIT