React tiny marquee

A tiny React component using CSS animations to create silky smooth marquees.

Usage

Simply wrap the <Marquee> tag around any component or text you'd like to move:

import Marquee from "tiny-marquee";
...
<Marquee>React components, or just some text.</Marquee>

For more examples view the mock file.

Properties

| Property | Type | Default | Description | | :--------------------------- | :------------------------------------------------------------- | :-------------- | :----------------------------------------------------------------------------------------------------------------------- | | style | CSSProperties | | Inline style for the container | | className | string | | CSS class name of the container | | autoFill | boolean | false | Whether to automatically fill blank space in the marquee with copies of the children | | isRunning | "on-overflow" \| boolean | "on-overflow" | When to move the marquee content (on-overflow is true when autoFill=true) | | isRunningWithReducedMotion | "on-overflow" \| boolean | false | When to move the marquee content when the client requests reduced motion (autoFill=true does not affect on-overflow) | | pauseOn | "hover" \| "click" | | Whether to pause the marquee when hovered or clicked | | direction | "normal" \| "reverse" \| "left" \| "right" \| "up" \| "down" | "normal" | The direction the marquee moves ("normal" and "reverse" follow the text direction) | | initialPosition | "start" \| "center" \| "end" | "center" | The position the content starts at | | space | number \| string | 0px | Space between the end of the previous and the start of the next marquee section | | speed | number | 50 | Speed in pixels per second | | delay | number | 0 | Initial animation delay in seconds | | iterationCount | number | Infinity | The number of times the marquee should loop | | fadeDistance | number \| string | 0 | The length (width / height) of the gradient on either edge. When positive, the marquee becomes transparent on the edges. | | onFinish | () => void | | Called when the marquee finishes scrolling and stops. | | onCycleComplete | () => void | | Called when the marquee finishes an iteration. Not called at the end of the last iteration (use onFinish instead). |