Marquee

import { Marquee } from "@lualtek/react-components";
 
export default () => {
  return <Marquee>...</Marquee>;
};

export type MarqueeProps = {
  /**
   * Whether to automatically fill blank space in the marquee with copies of the children or not
   * @defaultValue true
   */
  autoFill?: boolean;
 
  /**
   * Whether to play or pause the marquee
   * @defaultValue true
   */
  play?: boolean;
 
  /**
   * Whether to pause the marquee when hovered
   * @defaultValue false
   */
  pauseOnHover?: boolean;
 
  /**
   * Whether to pause the marquee when clicked
   * @defaultValue false
   */
  pauseOnClick?: boolean;
 
  /**
   * The direction the marquee is sliding
   * @defaultValue "left"
   */
  direction?: "left" | "right" | "up" | "down";
 
  /**
   * Speed calculated as pixels/second
   * @defaultValue 50
   */
  speed?: number;
 
  /**
   * Duration to delay the animation after render, in seconds
   * @defaultValue 0
   */
  delay?: number;
 
  /**
   * The number of times the marquee should loop, 0 is equivalent to infinite
   * @defaultValue 0
   */
  loop?: number;
 
  /**
   * Whether to fade out the edges of the marquee
   * @defaultValue false
   */
  fade?: boolean;
 
  /**
   * The size of the fade area
   */
  fadeSize?: string;
 
  /**
   * The gap between each child
   */
  gap?: TokensTypes["space"];
 
  /**
   * A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.
   */
  onFinish?: () => void;
 
  /**
   * A callback for when the marquee finishes a loop.
   * Does not call if maximum loops are reached (use onFinish instead).
   */
  onCycleComplete?: () => void;
 
  /**
   * A callback function that is invoked once the marquee has finished mounting.
   * It can be utilized to recalculate the page size, if necessary.
   */
  onMount?: () => void;
};