Ticker

import { Ticker } from '@hanzo/ui'

export function Default() {
  return (
    <Ticker>
      <XStack gap="$4" px="$4">
        {["🚀 Breaking News", "Latest Updates", "Live Feed", "Real-time Ticker"].map((label) => (
          <YStack key={label} px="$3" py="$2" rounded="$2" bg="$hover">
            {label}
          </YStack>
        ))}
      </XStack>
    </Ticker>
  )
}

export function Direction() {
  return (
    <Ticker direction="right">
      <XStack gap="$4" px="$4">
        {["Right to left is default", "This one runs the other way"].map((label) => (
          <YStack key={label} px="$3" py="$2" rounded="$2" bg="$hover">
            {label}
          </YStack>
        ))}
      </XStack>
    </Ticker>
  )
}

export function SpeedAndHover() {
  return (
    <Ticker speed={15} pauseOnHover={false}>
      <XStack px="$3">Won't pause, and loops in 15s</XStack>
    </Ticker>
  )
}

Types

export type TickerDirection = 'left' | 'right'

export type TickerProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
  children: React.ReactNode
  /** Full loop duration, in seconds. */
  speed?: number
  direction?: TickerDirection
  pauseOnHover?: boolean
  style?: React.CSSProperties
}

Exports