DOCSEARCHbyAlgolia
Submit Docs

react-fast-marquee

repository·master·Indexed 23 days ago

https://github.com/justin-chu/react-fast-marquee

A lightweight React component that uses CSS animations to create smooth, high-performance marquee effects for text or React components. Version 1.6.5 provides a Marquee component with configurable props for direction, speed, looping, and gradient styling, as well as lifecycle callbacks like onMount and onCycleComplete.

Tokens
1.3K
Snippets
2
Records
6
Agent score
31%

What's inside react-fast-marquee

  2. Use the Marquee component

    master

    To create a marquee, import the Marquee component and wrap it around the content (text or React components) you want to animate. The component uses CSS animations to provide smooth sliding effects.

    import React from "react";
import MyComponent from "../components/MyComponent";
import Marquee from "react-fast-marquee";

const App = () => (
  <Marquee>
    <MyComponent />
    <MyComponent />
    <MyComponent />
  </Marquee>
);

export default App;

  3. Marquee component props reference

    master

    The <Marquee> component accepts the following props to control its behavior, appearance, and lifecycle events:

    Behavior & Animation

    • direction: The direction the marquee slides. Options: "left" | "right" | "up" | "down". (Default: "left"). Warning: Vertical marquees ("up" or "down") are experimental; you may need to swap the marquee's height and width values.
    • speed: Speed calculated as pixels/second. (Default: 50).
    • delay: Duration to delay the animation after render, in seconds. (Default: 0).
    • loop: The number of times the marquee should loop. 0 is equivalent to infinite. (Default: 0).
    • play: Whether to play or pause the marquee. (Default: true).
    • autoFill: Whether to automatically fill blank space in the marquee with copies of the children. (Default: false).
    • pauseOnHover: Whether to pause the marquee when hovered. (Default: false).
    • pauseOnClick: Whether to pause the marquee when clicked. (Default: false).

    Visuals & Styling

    • gradient: Whether to show the gradient or not. (Default: false).
    • gradientColor: The color of the gradient. (Default: "white").
    • gradientWidth: The width of the gradient on either side. (Default: 200).
    • style: Inline style for the container div. (Default: {}).
    • className: Name of the css class to style the container div. (Default: "").

    Lifecycle Callbacks

    • onMount: Invoked once the marquee has finished mounting. Useful for recalculating page size. (Default: null).
    • onCycleComplete: Called when the marquee finishes a loop. Note: This does not call if maximum loops are reached; use onFinish instead. (Default: null).
    • onFinish: Called when the marquee finishes scrolling and stops. Only calls if loop is non-zero. (Default: null).

    Content

    • children: The children rendered inside the marquee. (Default: null).

  4. Configure the Marquee component props

    master

    The Marquee component accepts several props to control its behavior, appearance, and animation.

    Behavior Props

    • autoFill (boolean): If true, automatically fills blank space in the marquee with copies of the children. Defaults to false.
    • play (boolean): Controls whether the animation is playing or paused. Defaults to true.
    • pauseOnHover (boolean): If true, pauses the marquee when the user hovers over it. Defaults to false.
    • pauseOnClick (boolean): If true, pauses the marquee when the user clicks it. Defaults to false.
    • direction ('left' | 'right' | 'up' | 'down'): The sliding direction. Defaults to 'left'.
    • speed (number): The speed of the animation calculated in pixels per second. Defaults to 50.
    • delay (number): Delay in seconds before the animation starts after render. Defaults to 0.
    • loop (number): The number of times the marquee should loop. Use 0 for infinite looping. Defaults to 0.

    Appearance Props

    • style (CSSProperties): Inline styles for the container div. Defaults to {}.
    • className (string): Class name for the container div. Defaults to "".
    • gradient (boolean): Whether to show a gradient overlay. Defaults to false.
    • gradientColor (string): The color of the gradient. Defaults to "white".
    • gradientWidth (number | string): The width of the gradient on either side. Defaults to 200.

    Callback Props

    • onFinish (() => void): Invoked when the marquee finishes scrolling and stops (only if loop is non-zero). Defaults to null.
    • onCycleComplete (() => void): Invoked when the marquee finishes a single loop. Defaults to null.
    • onMount (() => void): Invoked once the marquee has finished mounting. Defaults to null.

    Content

    • children (ReactNode): The elements to be rendered inside the marquee.