Kibo UI
Header Background

Marquee

Marquees are a great way to show a list of items in a horizontal scrolling motion.

Installation

npx kibo-ui@latest add marquee

Features

  • Drag and drop items between groups
  • Customize the item contents

Examples

Without fading

Without pre-defined options

Custom spacing

Props

The marquee component is made up of the following subcomponents:

Marquee

The Marquee component is used to display the marquee.

PropTypeDefault
defaultChecked
boolean
-
defaultValue
string | number | readonly string[]
-
suppressContentEditableWarning
boolean
-
suppressHydrationWarning
boolean
-
accessKey
string
-
autoCapitalize
"off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {})
-
autoFocus
boolean
-
className
string
-
contentEditable
Booleanish | "inherit" | "plaintext-only"
-
contextMenu
string
-
dir
string
-
draggable
Booleanish
-
enterKeyHint
"enter" | "done" | "go" | "next" | "previous" | "search" | "send"
-
hidden
boolean
-
id
string
-
lang
string
-
nonce
string
-
slot
string
-
spellCheck
Booleanish
-
style
CSSProperties
-
tabIndex
number
-
title
string
-
translate
"yes" | "no"
-
radioGroup
string
-
role
AriaRole
-
about
string
-
content
string
-
datatype
string
-
inlist
any
-
prefix
string
-
property
string
-
rel
string
-
resource
string
-
rev
string
-
typeof
string
-
vocab
string
-
autoCorrect
string
-
autoSave
string
-
color
string
-
itemProp
string
-
itemScope
boolean
-
itemType
string
-
itemID
string
-
itemRef
string
-
results
number
-
security
string
-
unselectable
"off" | "on"
-
popover
"" | "auto" | "manual"
-
popoverTargetAction
"toggle" | "show" | "hide"
-
popoverTarget
string
-
inert
boolean
-
inputMode
"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"
-
is
string
-
aria-activedescendant
string
-
aria-atomic
Booleanish
-
aria-autocomplete
"none" | "list" | "inline" | "both"
-
aria-braillelabel
string
-
aria-brailleroledescription
string
-
aria-busy
Booleanish
-
aria-checked
boolean | "true" | "false" | "mixed"
-
aria-colcount
number
-
aria-colindex
number
-
aria-colindextext
string
-
aria-colspan
number
-
aria-controls
string
-
aria-current
boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
-
aria-describedby
string
-
aria-description
string
-
aria-details
string
-
aria-disabled
Booleanish
-
aria-dropeffect
"none" | "link" | "copy" | "execute" | "move" | "popup"
-
aria-errormessage
string
-
aria-expanded
Booleanish
-
aria-flowto
string
-
aria-grabbed
Booleanish
-
aria-haspopup
boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"
-
aria-hidden
Booleanish
-
aria-invalid
boolean | "true" | "false" | "grammar" | "spelling"
-
aria-keyshortcuts
string
-
aria-label
string
-
aria-labelledby
string
-
aria-level
number
-
aria-live
"off" | "assertive" | "polite"
-
aria-modal
Booleanish
-
aria-multiline
Booleanish
-
aria-multiselectable
Booleanish
-
aria-orientation
"horizontal" | "vertical"
-
aria-owns
string
-
aria-placeholder
string
-
aria-posinset
number
-
aria-pressed
boolean | "true" | "false" | "mixed"
-
aria-readonly
Booleanish
-
aria-relevant
"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
-
aria-required
Booleanish
-
aria-roledescription
string
-
aria-rowcount
number
-
aria-rowindex
number
-
aria-rowindextext
string
-
aria-rowspan
number
-
aria-selected
Booleanish
-
aria-setsize
number
-
aria-sort
"none" | "ascending" | "descending" | "other"
-
aria-valuemax
number
-
aria-valuemin
number
-
aria-valuenow
number
-
aria-valuetext
string
-
children
ReactNode
-
dangerouslySetInnerHTML
{ __html: string | TrustedHTML; }
-
onCopy
ClipboardEventHandler<HTMLDivElement>
-
onCopyCapture
ClipboardEventHandler<HTMLDivElement>
-
onCut
ClipboardEventHandler<HTMLDivElement>
-
onCutCapture
ClipboardEventHandler<HTMLDivElement>
-
onPaste
ClipboardEventHandler<HTMLDivElement>
-
onPasteCapture
ClipboardEventHandler<HTMLDivElement>
-
onCompositionEnd
CompositionEventHandler<HTMLDivElement>
-
onCompositionEndCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionStart
CompositionEventHandler<HTMLDivElement>
-
onCompositionStartCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdate
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdateCapture
CompositionEventHandler<HTMLDivElement>
-
onFocus
FocusEventHandler<HTMLDivElement>
-
onFocusCapture
FocusEventHandler<HTMLDivElement>
-
onBlur
FocusEventHandler<HTMLDivElement>
-
onBlurCapture
FocusEventHandler<HTMLDivElement>
-
onChange
FormEventHandler<HTMLDivElement>
-
onChangeCapture
FormEventHandler<HTMLDivElement>
-
onBeforeInput
FormEventHandler<HTMLDivElement>
-
onBeforeInputCapture
FormEventHandler<HTMLDivElement>
-
onInput
FormEventHandler<HTMLDivElement>
-
onInputCapture
FormEventHandler<HTMLDivElement>
-
onReset
FormEventHandler<HTMLDivElement>
-
onResetCapture
FormEventHandler<HTMLDivElement>
-
onSubmit
FormEventHandler<HTMLDivElement>
-
onSubmitCapture
FormEventHandler<HTMLDivElement>
-
onInvalid
FormEventHandler<HTMLDivElement>
-
onInvalidCapture
FormEventHandler<HTMLDivElement>
-
onLoad
ReactEventHandler<HTMLDivElement>
-
onLoadCapture
ReactEventHandler<HTMLDivElement>
-
onError
ReactEventHandler<HTMLDivElement>
-
onErrorCapture
ReactEventHandler<HTMLDivElement>
-
onKeyDown
KeyboardEventHandler<HTMLDivElement>
-
onKeyDownCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyPress
KeyboardEventHandler<HTMLDivElement>
-
onKeyPressCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyUp
KeyboardEventHandler<HTMLDivElement>
-
onKeyUpCapture
KeyboardEventHandler<HTMLDivElement>
-
onAbort
ReactEventHandler<HTMLDivElement>
-
onAbortCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlay
ReactEventHandler<HTMLDivElement>
-
onCanPlayCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlayThrough
ReactEventHandler<HTMLDivElement>
-
onCanPlayThroughCapture
ReactEventHandler<HTMLDivElement>
-
onDurationChange
ReactEventHandler<HTMLDivElement>
-
onDurationChangeCapture
ReactEventHandler<HTMLDivElement>
-
onEmptied
ReactEventHandler<HTMLDivElement>
-
onEmptiedCapture
ReactEventHandler<HTMLDivElement>
-
onEncrypted
ReactEventHandler<HTMLDivElement>
-
onEncryptedCapture
ReactEventHandler<HTMLDivElement>
-
onEnded
ReactEventHandler<HTMLDivElement>
-
onEndedCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedData
ReactEventHandler<HTMLDivElement>
-
onLoadedDataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadata
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadStart
ReactEventHandler<HTMLDivElement>
-
onLoadStartCapture
ReactEventHandler<HTMLDivElement>
-
onPause
ReactEventHandler<HTMLDivElement>
-
onPauseCapture
ReactEventHandler<HTMLDivElement>
-
onPlay
ReactEventHandler<HTMLDivElement>
-
onPlayCapture
ReactEventHandler<HTMLDivElement>
-
onPlaying
ReactEventHandler<HTMLDivElement>
-
onPlayingCapture
ReactEventHandler<HTMLDivElement>
-
onProgress
ReactEventHandler<HTMLDivElement>
-
onProgressCapture
ReactEventHandler<HTMLDivElement>
-
onRateChange
ReactEventHandler<HTMLDivElement>
-
onRateChangeCapture
ReactEventHandler<HTMLDivElement>
-
onResize
ReactEventHandler<HTMLDivElement>
-
onResizeCapture
ReactEventHandler<HTMLDivElement>
-
onSeeked
ReactEventHandler<HTMLDivElement>
-
onSeekedCapture
ReactEventHandler<HTMLDivElement>
-
onSeeking
ReactEventHandler<HTMLDivElement>
-
onSeekingCapture
ReactEventHandler<HTMLDivElement>
-
onStalled
ReactEventHandler<HTMLDivElement>
-
onStalledCapture
ReactEventHandler<HTMLDivElement>
-
onSuspend
ReactEventHandler<HTMLDivElement>
-
onSuspendCapture
ReactEventHandler<HTMLDivElement>
-
onTimeUpdate
ReactEventHandler<HTMLDivElement>
-
onTimeUpdateCapture
ReactEventHandler<HTMLDivElement>
-
onVolumeChange
ReactEventHandler<HTMLDivElement>
-
onVolumeChangeCapture
ReactEventHandler<HTMLDivElement>
-
onWaiting
ReactEventHandler<HTMLDivElement>
-
onWaitingCapture
ReactEventHandler<HTMLDivElement>
-
onAuxClick
MouseEventHandler<HTMLDivElement>
-
onAuxClickCapture
MouseEventHandler<HTMLDivElement>
-
onClick
MouseEventHandler<HTMLDivElement>
-
onClickCapture
MouseEventHandler<HTMLDivElement>
-
onContextMenu
MouseEventHandler<HTMLDivElement>
-
onContextMenuCapture
MouseEventHandler<HTMLDivElement>
-
onDoubleClick
MouseEventHandler<HTMLDivElement>
-
onDoubleClickCapture
MouseEventHandler<HTMLDivElement>
-
onDrag
DragEventHandler<HTMLDivElement>
-
onDragCapture
DragEventHandler<HTMLDivElement>
-
onDragEnd
DragEventHandler<HTMLDivElement>
-
onDragEndCapture
DragEventHandler<HTMLDivElement>
-
onDragEnter
DragEventHandler<HTMLDivElement>
-
onDragEnterCapture
DragEventHandler<HTMLDivElement>
-
onDragExit
DragEventHandler<HTMLDivElement>
-
onDragExitCapture
DragEventHandler<HTMLDivElement>
-
onDragLeave
DragEventHandler<HTMLDivElement>
-
onDragLeaveCapture
DragEventHandler<HTMLDivElement>
-
onDragOver
DragEventHandler<HTMLDivElement>
-
onDragOverCapture
DragEventHandler<HTMLDivElement>
-
onDragStart
DragEventHandler<HTMLDivElement>
-
onDragStartCapture
DragEventHandler<HTMLDivElement>
-
onDrop
DragEventHandler<HTMLDivElement>
-
onDropCapture
DragEventHandler<HTMLDivElement>
-
onMouseDown
MouseEventHandler<HTMLDivElement>
-
onMouseDownCapture
MouseEventHandler<HTMLDivElement>
-
onMouseEnter
MouseEventHandler<HTMLDivElement>
-
onMouseLeave
MouseEventHandler<HTMLDivElement>
-
onMouseMove
MouseEventHandler<HTMLDivElement>
-
onMouseMoveCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOut
MouseEventHandler<HTMLDivElement>
-
onMouseOutCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOver
MouseEventHandler<HTMLDivElement>
-
onMouseOverCapture
MouseEventHandler<HTMLDivElement>
-
onMouseUp
MouseEventHandler<HTMLDivElement>
-
onMouseUpCapture
MouseEventHandler<HTMLDivElement>
-
onSelect
ReactEventHandler<HTMLDivElement>
-
onSelectCapture
ReactEventHandler<HTMLDivElement>
-
onTouchCancel
TouchEventHandler<HTMLDivElement>
-
onTouchCancelCapture
TouchEventHandler<HTMLDivElement>
-
onTouchEnd
TouchEventHandler<HTMLDivElement>
-
onTouchEndCapture
TouchEventHandler<HTMLDivElement>
-
onTouchMove
TouchEventHandler<HTMLDivElement>
-
onTouchMoveCapture
TouchEventHandler<HTMLDivElement>
-
onTouchStart
TouchEventHandler<HTMLDivElement>
-
onTouchStartCapture
TouchEventHandler<HTMLDivElement>
-
onPointerDown
PointerEventHandler<HTMLDivElement>
-
onPointerDownCapture
PointerEventHandler<HTMLDivElement>
-
onPointerMove
PointerEventHandler<HTMLDivElement>
-
onPointerMoveCapture
PointerEventHandler<HTMLDivElement>
-
onPointerUp
PointerEventHandler<HTMLDivElement>
-
onPointerUpCapture
PointerEventHandler<HTMLDivElement>
-
onPointerCancel
PointerEventHandler<HTMLDivElement>
-
onPointerCancelCapture
PointerEventHandler<HTMLDivElement>
-
onPointerEnter
PointerEventHandler<HTMLDivElement>
-
onPointerLeave
PointerEventHandler<HTMLDivElement>
-
onPointerOver
PointerEventHandler<HTMLDivElement>
-
onPointerOverCapture
PointerEventHandler<HTMLDivElement>
-
onPointerOut
PointerEventHandler<HTMLDivElement>
-
onPointerOutCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onScroll
UIEventHandler<HTMLDivElement>
-
onScrollCapture
UIEventHandler<HTMLDivElement>
-
onWheel
WheelEventHandler<HTMLDivElement>
-
onWheelCapture
WheelEventHandler<HTMLDivElement>
-
onAnimationStart
AnimationEventHandler<HTMLDivElement>
-
onAnimationStartCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationEnd
AnimationEventHandler<HTMLDivElement>
-
onAnimationEndCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationIteration
AnimationEventHandler<HTMLDivElement>
-
onAnimationIterationCapture
AnimationEventHandler<HTMLDivElement>
-
onToggle
ToggleEventHandler<HTMLDivElement>
-
onBeforeToggle
ToggleEventHandler<HTMLDivElement>
-
onTransitionCancel
TransitionEventHandler<HTMLDivElement>
-
onTransitionCancelCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionEnd
TransitionEventHandler<HTMLDivElement>
-
onTransitionEndCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionRun
TransitionEventHandler<HTMLDivElement>
-
onTransitionRunCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionStart
TransitionEventHandler<HTMLDivElement>
-
onTransitionStartCapture
TransitionEventHandler<HTMLDivElement>
-

MarqueeContent

The MarqueeContent component is used to display the content of the marquee.

PropTypeDefault
style
CSSProperties
{}
className
string
""
autoFill
boolean
false
play
boolean
true
pauseOnHover
boolean
false
pauseOnClick
boolean
false
direction
"left" | "right" | "up" | "down"
"left"
speed
number
50
delay
number
0
loop
number
0
gradient
boolean
false
gradientColor
string
"white"
gradientWidth
string | number
200
onFinish
() => void
null
onCycleComplete
() => void
null
onMount
() => void
null
children
ReactNode
null
ref
((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLDivElement | null>
-
key
Key
-

MarqueeFade

The MarqueeFade component is used to display the fade effect on the marquee.

PropTypeDefault
defaultChecked
boolean
-
defaultValue
string | number | readonly string[]
-
suppressContentEditableWarning
boolean
-
suppressHydrationWarning
boolean
-
accessKey
string
-
autoCapitalize
"off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {})
-
autoFocus
boolean
-
className
string
-
contentEditable
Booleanish | "inherit" | "plaintext-only"
-
contextMenu
string
-
dir
string
-
draggable
Booleanish
-
enterKeyHint
"enter" | "done" | "go" | "next" | "previous" | "search" | "send"
-
hidden
boolean
-
id
string
-
lang
string
-
nonce
string
-
slot
string
-
spellCheck
Booleanish
-
style
CSSProperties
-
tabIndex
number
-
title
string
-
translate
"yes" | "no"
-
radioGroup
string
-
role
AriaRole
-
about
string
-
content
string
-
datatype
string
-
inlist
any
-
prefix
string
-
property
string
-
rel
string
-
resource
string
-
rev
string
-
typeof
string
-
vocab
string
-
autoCorrect
string
-
autoSave
string
-
color
string
-
itemProp
string
-
itemScope
boolean
-
itemType
string
-
itemID
string
-
itemRef
string
-
results
number
-
security
string
-
unselectable
"off" | "on"
-
popover
"" | "auto" | "manual"
-
popoverTargetAction
"toggle" | "show" | "hide"
-
popoverTarget
string
-
inert
boolean
-
inputMode
"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"
-
is
string
-
aria-activedescendant
string
-
aria-atomic
Booleanish
-
aria-autocomplete
"none" | "list" | "inline" | "both"
-
aria-braillelabel
string
-
aria-brailleroledescription
string
-
aria-busy
Booleanish
-
aria-checked
boolean | "true" | "false" | "mixed"
-
aria-colcount
number
-
aria-colindex
number
-
aria-colindextext
string
-
aria-colspan
number
-
aria-controls
string
-
aria-current
boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
-
aria-describedby
string
-
aria-description
string
-
aria-details
string
-
aria-disabled
Booleanish
-
aria-dropeffect
"none" | "link" | "copy" | "execute" | "move" | "popup"
-
aria-errormessage
string
-
aria-expanded
Booleanish
-
aria-flowto
string
-
aria-grabbed
Booleanish
-
aria-haspopup
boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"
-
aria-hidden
Booleanish
-
aria-invalid
boolean | "true" | "false" | "grammar" | "spelling"
-
aria-keyshortcuts
string
-
aria-label
string
-
aria-labelledby
string
-
aria-level
number
-
aria-live
"off" | "assertive" | "polite"
-
aria-modal
Booleanish
-
aria-multiline
Booleanish
-
aria-multiselectable
Booleanish
-
aria-orientation
"horizontal" | "vertical"
-
aria-owns
string
-
aria-placeholder
string
-
aria-posinset
number
-
aria-pressed
boolean | "true" | "false" | "mixed"
-
aria-readonly
Booleanish
-
aria-relevant
"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
-
aria-required
Booleanish
-
aria-roledescription
string
-
aria-rowcount
number
-
aria-rowindex
number
-
aria-rowindextext
string
-
aria-rowspan
number
-
aria-selected
Booleanish
-
aria-setsize
number
-
aria-sort
"none" | "ascending" | "descending" | "other"
-
aria-valuemax
number
-
aria-valuemin
number
-
aria-valuenow
number
-
aria-valuetext
string
-
children
ReactNode
-
dangerouslySetInnerHTML
{ __html: string | TrustedHTML; }
-
onCopy
ClipboardEventHandler<HTMLDivElement>
-
onCopyCapture
ClipboardEventHandler<HTMLDivElement>
-
onCut
ClipboardEventHandler<HTMLDivElement>
-
onCutCapture
ClipboardEventHandler<HTMLDivElement>
-
onPaste
ClipboardEventHandler<HTMLDivElement>
-
onPasteCapture
ClipboardEventHandler<HTMLDivElement>
-
onCompositionEnd
CompositionEventHandler<HTMLDivElement>
-
onCompositionEndCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionStart
CompositionEventHandler<HTMLDivElement>
-
onCompositionStartCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdate
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdateCapture
CompositionEventHandler<HTMLDivElement>
-
onFocus
FocusEventHandler<HTMLDivElement>
-
onFocusCapture
FocusEventHandler<HTMLDivElement>
-
onBlur
FocusEventHandler<HTMLDivElement>
-
onBlurCapture
FocusEventHandler<HTMLDivElement>
-
onChange
FormEventHandler<HTMLDivElement>
-
onChangeCapture
FormEventHandler<HTMLDivElement>
-
onBeforeInput
FormEventHandler<HTMLDivElement>
-
onBeforeInputCapture
FormEventHandler<HTMLDivElement>
-
onInput
FormEventHandler<HTMLDivElement>
-
onInputCapture
FormEventHandler<HTMLDivElement>
-
onReset
FormEventHandler<HTMLDivElement>
-
onResetCapture
FormEventHandler<HTMLDivElement>
-
onSubmit
FormEventHandler<HTMLDivElement>
-
onSubmitCapture
FormEventHandler<HTMLDivElement>
-
onInvalid
FormEventHandler<HTMLDivElement>
-
onInvalidCapture
FormEventHandler<HTMLDivElement>
-
onLoad
ReactEventHandler<HTMLDivElement>
-
onLoadCapture
ReactEventHandler<HTMLDivElement>
-
onError
ReactEventHandler<HTMLDivElement>
-
onErrorCapture
ReactEventHandler<HTMLDivElement>
-
onKeyDown
KeyboardEventHandler<HTMLDivElement>
-
onKeyDownCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyPress
KeyboardEventHandler<HTMLDivElement>
-
onKeyPressCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyUp
KeyboardEventHandler<HTMLDivElement>
-
onKeyUpCapture
KeyboardEventHandler<HTMLDivElement>
-
onAbort
ReactEventHandler<HTMLDivElement>
-
onAbortCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlay
ReactEventHandler<HTMLDivElement>
-
onCanPlayCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlayThrough
ReactEventHandler<HTMLDivElement>
-
onCanPlayThroughCapture
ReactEventHandler<HTMLDivElement>
-
onDurationChange
ReactEventHandler<HTMLDivElement>
-
onDurationChangeCapture
ReactEventHandler<HTMLDivElement>
-
onEmptied
ReactEventHandler<HTMLDivElement>
-
onEmptiedCapture
ReactEventHandler<HTMLDivElement>
-
onEncrypted
ReactEventHandler<HTMLDivElement>
-
onEncryptedCapture
ReactEventHandler<HTMLDivElement>
-
onEnded
ReactEventHandler<HTMLDivElement>
-
onEndedCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedData
ReactEventHandler<HTMLDivElement>
-
onLoadedDataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadata
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadStart
ReactEventHandler<HTMLDivElement>
-
onLoadStartCapture
ReactEventHandler<HTMLDivElement>
-
onPause
ReactEventHandler<HTMLDivElement>
-
onPauseCapture
ReactEventHandler<HTMLDivElement>
-
onPlay
ReactEventHandler<HTMLDivElement>
-
onPlayCapture
ReactEventHandler<HTMLDivElement>
-
onPlaying
ReactEventHandler<HTMLDivElement>
-
onPlayingCapture
ReactEventHandler<HTMLDivElement>
-
onProgress
ReactEventHandler<HTMLDivElement>
-
onProgressCapture
ReactEventHandler<HTMLDivElement>
-
onRateChange
ReactEventHandler<HTMLDivElement>
-
onRateChangeCapture
ReactEventHandler<HTMLDivElement>
-
onResize
ReactEventHandler<HTMLDivElement>
-
onResizeCapture
ReactEventHandler<HTMLDivElement>
-
onSeeked
ReactEventHandler<HTMLDivElement>
-
onSeekedCapture
ReactEventHandler<HTMLDivElement>
-
onSeeking
ReactEventHandler<HTMLDivElement>
-
onSeekingCapture
ReactEventHandler<HTMLDivElement>
-
onStalled
ReactEventHandler<HTMLDivElement>
-
onStalledCapture
ReactEventHandler<HTMLDivElement>
-
onSuspend
ReactEventHandler<HTMLDivElement>
-
onSuspendCapture
ReactEventHandler<HTMLDivElement>
-
onTimeUpdate
ReactEventHandler<HTMLDivElement>
-
onTimeUpdateCapture
ReactEventHandler<HTMLDivElement>
-
onVolumeChange
ReactEventHandler<HTMLDivElement>
-
onVolumeChangeCapture
ReactEventHandler<HTMLDivElement>
-
onWaiting
ReactEventHandler<HTMLDivElement>
-
onWaitingCapture
ReactEventHandler<HTMLDivElement>
-
onAuxClick
MouseEventHandler<HTMLDivElement>
-
onAuxClickCapture
MouseEventHandler<HTMLDivElement>
-
onClick
MouseEventHandler<HTMLDivElement>
-
onClickCapture
MouseEventHandler<HTMLDivElement>
-
onContextMenu
MouseEventHandler<HTMLDivElement>
-
onContextMenuCapture
MouseEventHandler<HTMLDivElement>
-
onDoubleClick
MouseEventHandler<HTMLDivElement>
-
onDoubleClickCapture
MouseEventHandler<HTMLDivElement>
-
onDrag
DragEventHandler<HTMLDivElement>
-
onDragCapture
DragEventHandler<HTMLDivElement>
-
onDragEnd
DragEventHandler<HTMLDivElement>
-
onDragEndCapture
DragEventHandler<HTMLDivElement>
-
onDragEnter
DragEventHandler<HTMLDivElement>
-
onDragEnterCapture
DragEventHandler<HTMLDivElement>
-
onDragExit
DragEventHandler<HTMLDivElement>
-
onDragExitCapture
DragEventHandler<HTMLDivElement>
-
onDragLeave
DragEventHandler<HTMLDivElement>
-
onDragLeaveCapture
DragEventHandler<HTMLDivElement>
-
onDragOver
DragEventHandler<HTMLDivElement>
-
onDragOverCapture
DragEventHandler<HTMLDivElement>
-
onDragStart
DragEventHandler<HTMLDivElement>
-
onDragStartCapture
DragEventHandler<HTMLDivElement>
-
onDrop
DragEventHandler<HTMLDivElement>
-
onDropCapture
DragEventHandler<HTMLDivElement>
-
onMouseDown
MouseEventHandler<HTMLDivElement>
-
onMouseDownCapture
MouseEventHandler<HTMLDivElement>
-
onMouseEnter
MouseEventHandler<HTMLDivElement>
-
onMouseLeave
MouseEventHandler<HTMLDivElement>
-
onMouseMove
MouseEventHandler<HTMLDivElement>
-
onMouseMoveCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOut
MouseEventHandler<HTMLDivElement>
-
onMouseOutCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOver
MouseEventHandler<HTMLDivElement>
-
onMouseOverCapture
MouseEventHandler<HTMLDivElement>
-
onMouseUp
MouseEventHandler<HTMLDivElement>
-
onMouseUpCapture
MouseEventHandler<HTMLDivElement>
-
onSelect
ReactEventHandler<HTMLDivElement>
-
onSelectCapture
ReactEventHandler<HTMLDivElement>
-
onTouchCancel
TouchEventHandler<HTMLDivElement>
-
onTouchCancelCapture
TouchEventHandler<HTMLDivElement>
-
onTouchEnd
TouchEventHandler<HTMLDivElement>
-
onTouchEndCapture
TouchEventHandler<HTMLDivElement>
-
onTouchMove
TouchEventHandler<HTMLDivElement>
-
onTouchMoveCapture
TouchEventHandler<HTMLDivElement>
-
onTouchStart
TouchEventHandler<HTMLDivElement>
-
onTouchStartCapture
TouchEventHandler<HTMLDivElement>
-
onPointerDown
PointerEventHandler<HTMLDivElement>
-
onPointerDownCapture
PointerEventHandler<HTMLDivElement>
-
onPointerMove
PointerEventHandler<HTMLDivElement>
-
onPointerMoveCapture
PointerEventHandler<HTMLDivElement>
-
onPointerUp
PointerEventHandler<HTMLDivElement>
-
onPointerUpCapture
PointerEventHandler<HTMLDivElement>
-
onPointerCancel
PointerEventHandler<HTMLDivElement>
-
onPointerCancelCapture
PointerEventHandler<HTMLDivElement>
-
onPointerEnter
PointerEventHandler<HTMLDivElement>
-
onPointerLeave
PointerEventHandler<HTMLDivElement>
-
onPointerOver
PointerEventHandler<HTMLDivElement>
-
onPointerOverCapture
PointerEventHandler<HTMLDivElement>
-
onPointerOut
PointerEventHandler<HTMLDivElement>
-
onPointerOutCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onScroll
UIEventHandler<HTMLDivElement>
-
onScrollCapture
UIEventHandler<HTMLDivElement>
-
onWheel
WheelEventHandler<HTMLDivElement>
-
onWheelCapture
WheelEventHandler<HTMLDivElement>
-
onAnimationStart
AnimationEventHandler<HTMLDivElement>
-
onAnimationStartCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationEnd
AnimationEventHandler<HTMLDivElement>
-
onAnimationEndCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationIteration
AnimationEventHandler<HTMLDivElement>
-
onAnimationIterationCapture
AnimationEventHandler<HTMLDivElement>
-
onToggle
ToggleEventHandler<HTMLDivElement>
-
onBeforeToggle
ToggleEventHandler<HTMLDivElement>
-
onTransitionCancel
TransitionEventHandler<HTMLDivElement>
-
onTransitionCancelCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionEnd
TransitionEventHandler<HTMLDivElement>
-
onTransitionEndCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionRun
TransitionEventHandler<HTMLDivElement>
-
onTransitionRunCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionStart
TransitionEventHandler<HTMLDivElement>
-
onTransitionStartCapture
TransitionEventHandler<HTMLDivElement>
-
side
"left" | "right"
-

MarqueeItem

The MarqueeItem component is used to display an item.

PropTypeDefault
defaultChecked
boolean
-
defaultValue
string | number | readonly string[]
-
suppressContentEditableWarning
boolean
-
suppressHydrationWarning
boolean
-
accessKey
string
-
autoCapitalize
"off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {})
-
autoFocus
boolean
-
className
string
-
contentEditable
Booleanish | "inherit" | "plaintext-only"
-
contextMenu
string
-
dir
string
-
draggable
Booleanish
-
enterKeyHint
"enter" | "done" | "go" | "next" | "previous" | "search" | "send"
-
hidden
boolean
-
id
string
-
lang
string
-
nonce
string
-
slot
string
-
spellCheck
Booleanish
-
style
CSSProperties
-
tabIndex
number
-
title
string
-
translate
"yes" | "no"
-
radioGroup
string
-
role
AriaRole
-
about
string
-
content
string
-
datatype
string
-
inlist
any
-
prefix
string
-
property
string
-
rel
string
-
resource
string
-
rev
string
-
typeof
string
-
vocab
string
-
autoCorrect
string
-
autoSave
string
-
color
string
-
itemProp
string
-
itemScope
boolean
-
itemType
string
-
itemID
string
-
itemRef
string
-
results
number
-
security
string
-
unselectable
"off" | "on"
-
popover
"" | "auto" | "manual"
-
popoverTargetAction
"toggle" | "show" | "hide"
-
popoverTarget
string
-
inert
boolean
-
inputMode
"none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal"
-
is
string
-
aria-activedescendant
string
-
aria-atomic
Booleanish
-
aria-autocomplete
"none" | "list" | "inline" | "both"
-
aria-braillelabel
string
-
aria-brailleroledescription
string
-
aria-busy
Booleanish
-
aria-checked
boolean | "true" | "false" | "mixed"
-
aria-colcount
number
-
aria-colindex
number
-
aria-colindextext
string
-
aria-colspan
number
-
aria-controls
string
-
aria-current
boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time"
-
aria-describedby
string
-
aria-description
string
-
aria-details
string
-
aria-disabled
Booleanish
-
aria-dropeffect
"none" | "link" | "copy" | "execute" | "move" | "popup"
-
aria-errormessage
string
-
aria-expanded
Booleanish
-
aria-flowto
string
-
aria-grabbed
Booleanish
-
aria-haspopup
boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"
-
aria-hidden
Booleanish
-
aria-invalid
boolean | "true" | "false" | "grammar" | "spelling"
-
aria-keyshortcuts
string
-
aria-label
string
-
aria-labelledby
string
-
aria-level
number
-
aria-live
"off" | "assertive" | "polite"
-
aria-modal
Booleanish
-
aria-multiline
Booleanish
-
aria-multiselectable
Booleanish
-
aria-orientation
"horizontal" | "vertical"
-
aria-owns
string
-
aria-placeholder
string
-
aria-posinset
number
-
aria-pressed
boolean | "true" | "false" | "mixed"
-
aria-readonly
Booleanish
-
aria-relevant
"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
-
aria-required
Booleanish
-
aria-roledescription
string
-
aria-rowcount
number
-
aria-rowindex
number
-
aria-rowindextext
string
-
aria-rowspan
number
-
aria-selected
Booleanish
-
aria-setsize
number
-
aria-sort
"none" | "ascending" | "descending" | "other"
-
aria-valuemax
number
-
aria-valuemin
number
-
aria-valuenow
number
-
aria-valuetext
string
-
children
ReactNode
-
dangerouslySetInnerHTML
{ __html: string | TrustedHTML; }
-
onCopy
ClipboardEventHandler<HTMLDivElement>
-
onCopyCapture
ClipboardEventHandler<HTMLDivElement>
-
onCut
ClipboardEventHandler<HTMLDivElement>
-
onCutCapture
ClipboardEventHandler<HTMLDivElement>
-
onPaste
ClipboardEventHandler<HTMLDivElement>
-
onPasteCapture
ClipboardEventHandler<HTMLDivElement>
-
onCompositionEnd
CompositionEventHandler<HTMLDivElement>
-
onCompositionEndCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionStart
CompositionEventHandler<HTMLDivElement>
-
onCompositionStartCapture
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdate
CompositionEventHandler<HTMLDivElement>
-
onCompositionUpdateCapture
CompositionEventHandler<HTMLDivElement>
-
onFocus
FocusEventHandler<HTMLDivElement>
-
onFocusCapture
FocusEventHandler<HTMLDivElement>
-
onBlur
FocusEventHandler<HTMLDivElement>
-
onBlurCapture
FocusEventHandler<HTMLDivElement>
-
onChange
FormEventHandler<HTMLDivElement>
-
onChangeCapture
FormEventHandler<HTMLDivElement>
-
onBeforeInput
FormEventHandler<HTMLDivElement>
-
onBeforeInputCapture
FormEventHandler<HTMLDivElement>
-
onInput
FormEventHandler<HTMLDivElement>
-
onInputCapture
FormEventHandler<HTMLDivElement>
-
onReset
FormEventHandler<HTMLDivElement>
-
onResetCapture
FormEventHandler<HTMLDivElement>
-
onSubmit
FormEventHandler<HTMLDivElement>
-
onSubmitCapture
FormEventHandler<HTMLDivElement>
-
onInvalid
FormEventHandler<HTMLDivElement>
-
onInvalidCapture
FormEventHandler<HTMLDivElement>
-
onLoad
ReactEventHandler<HTMLDivElement>
-
onLoadCapture
ReactEventHandler<HTMLDivElement>
-
onError
ReactEventHandler<HTMLDivElement>
-
onErrorCapture
ReactEventHandler<HTMLDivElement>
-
onKeyDown
KeyboardEventHandler<HTMLDivElement>
-
onKeyDownCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyPress
KeyboardEventHandler<HTMLDivElement>
-
onKeyPressCapture
KeyboardEventHandler<HTMLDivElement>
-
onKeyUp
KeyboardEventHandler<HTMLDivElement>
-
onKeyUpCapture
KeyboardEventHandler<HTMLDivElement>
-
onAbort
ReactEventHandler<HTMLDivElement>
-
onAbortCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlay
ReactEventHandler<HTMLDivElement>
-
onCanPlayCapture
ReactEventHandler<HTMLDivElement>
-
onCanPlayThrough
ReactEventHandler<HTMLDivElement>
-
onCanPlayThroughCapture
ReactEventHandler<HTMLDivElement>
-
onDurationChange
ReactEventHandler<HTMLDivElement>
-
onDurationChangeCapture
ReactEventHandler<HTMLDivElement>
-
onEmptied
ReactEventHandler<HTMLDivElement>
-
onEmptiedCapture
ReactEventHandler<HTMLDivElement>
-
onEncrypted
ReactEventHandler<HTMLDivElement>
-
onEncryptedCapture
ReactEventHandler<HTMLDivElement>
-
onEnded
ReactEventHandler<HTMLDivElement>
-
onEndedCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedData
ReactEventHandler<HTMLDivElement>
-
onLoadedDataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadata
ReactEventHandler<HTMLDivElement>
-
onLoadedMetadataCapture
ReactEventHandler<HTMLDivElement>
-
onLoadStart
ReactEventHandler<HTMLDivElement>
-
onLoadStartCapture
ReactEventHandler<HTMLDivElement>
-
onPause
ReactEventHandler<HTMLDivElement>
-
onPauseCapture
ReactEventHandler<HTMLDivElement>
-
onPlay
ReactEventHandler<HTMLDivElement>
-
onPlayCapture
ReactEventHandler<HTMLDivElement>
-
onPlaying
ReactEventHandler<HTMLDivElement>
-
onPlayingCapture
ReactEventHandler<HTMLDivElement>
-
onProgress
ReactEventHandler<HTMLDivElement>
-
onProgressCapture
ReactEventHandler<HTMLDivElement>
-
onRateChange
ReactEventHandler<HTMLDivElement>
-
onRateChangeCapture
ReactEventHandler<HTMLDivElement>
-
onResize
ReactEventHandler<HTMLDivElement>
-
onResizeCapture
ReactEventHandler<HTMLDivElement>
-
onSeeked
ReactEventHandler<HTMLDivElement>
-
onSeekedCapture
ReactEventHandler<HTMLDivElement>
-
onSeeking
ReactEventHandler<HTMLDivElement>
-
onSeekingCapture
ReactEventHandler<HTMLDivElement>
-
onStalled
ReactEventHandler<HTMLDivElement>
-
onStalledCapture
ReactEventHandler<HTMLDivElement>
-
onSuspend
ReactEventHandler<HTMLDivElement>
-
onSuspendCapture
ReactEventHandler<HTMLDivElement>
-
onTimeUpdate
ReactEventHandler<HTMLDivElement>
-
onTimeUpdateCapture
ReactEventHandler<HTMLDivElement>
-
onVolumeChange
ReactEventHandler<HTMLDivElement>
-
onVolumeChangeCapture
ReactEventHandler<HTMLDivElement>
-
onWaiting
ReactEventHandler<HTMLDivElement>
-
onWaitingCapture
ReactEventHandler<HTMLDivElement>
-
onAuxClick
MouseEventHandler<HTMLDivElement>
-
onAuxClickCapture
MouseEventHandler<HTMLDivElement>
-
onClick
MouseEventHandler<HTMLDivElement>
-
onClickCapture
MouseEventHandler<HTMLDivElement>
-
onContextMenu
MouseEventHandler<HTMLDivElement>
-
onContextMenuCapture
MouseEventHandler<HTMLDivElement>
-
onDoubleClick
MouseEventHandler<HTMLDivElement>
-
onDoubleClickCapture
MouseEventHandler<HTMLDivElement>
-
onDrag
DragEventHandler<HTMLDivElement>
-
onDragCapture
DragEventHandler<HTMLDivElement>
-
onDragEnd
DragEventHandler<HTMLDivElement>
-
onDragEndCapture
DragEventHandler<HTMLDivElement>
-
onDragEnter
DragEventHandler<HTMLDivElement>
-
onDragEnterCapture
DragEventHandler<HTMLDivElement>
-
onDragExit
DragEventHandler<HTMLDivElement>
-
onDragExitCapture
DragEventHandler<HTMLDivElement>
-
onDragLeave
DragEventHandler<HTMLDivElement>
-
onDragLeaveCapture
DragEventHandler<HTMLDivElement>
-
onDragOver
DragEventHandler<HTMLDivElement>
-
onDragOverCapture
DragEventHandler<HTMLDivElement>
-
onDragStart
DragEventHandler<HTMLDivElement>
-
onDragStartCapture
DragEventHandler<HTMLDivElement>
-
onDrop
DragEventHandler<HTMLDivElement>
-
onDropCapture
DragEventHandler<HTMLDivElement>
-
onMouseDown
MouseEventHandler<HTMLDivElement>
-
onMouseDownCapture
MouseEventHandler<HTMLDivElement>
-
onMouseEnter
MouseEventHandler<HTMLDivElement>
-
onMouseLeave
MouseEventHandler<HTMLDivElement>
-
onMouseMove
MouseEventHandler<HTMLDivElement>
-
onMouseMoveCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOut
MouseEventHandler<HTMLDivElement>
-
onMouseOutCapture
MouseEventHandler<HTMLDivElement>
-
onMouseOver
MouseEventHandler<HTMLDivElement>
-
onMouseOverCapture
MouseEventHandler<HTMLDivElement>
-
onMouseUp
MouseEventHandler<HTMLDivElement>
-
onMouseUpCapture
MouseEventHandler<HTMLDivElement>
-
onSelect
ReactEventHandler<HTMLDivElement>
-
onSelectCapture
ReactEventHandler<HTMLDivElement>
-
onTouchCancel
TouchEventHandler<HTMLDivElement>
-
onTouchCancelCapture
TouchEventHandler<HTMLDivElement>
-
onTouchEnd
TouchEventHandler<HTMLDivElement>
-
onTouchEndCapture
TouchEventHandler<HTMLDivElement>
-
onTouchMove
TouchEventHandler<HTMLDivElement>
-
onTouchMoveCapture
TouchEventHandler<HTMLDivElement>
-
onTouchStart
TouchEventHandler<HTMLDivElement>
-
onTouchStartCapture
TouchEventHandler<HTMLDivElement>
-
onPointerDown
PointerEventHandler<HTMLDivElement>
-
onPointerDownCapture
PointerEventHandler<HTMLDivElement>
-
onPointerMove
PointerEventHandler<HTMLDivElement>
-
onPointerMoveCapture
PointerEventHandler<HTMLDivElement>
-
onPointerUp
PointerEventHandler<HTMLDivElement>
-
onPointerUpCapture
PointerEventHandler<HTMLDivElement>
-
onPointerCancel
PointerEventHandler<HTMLDivElement>
-
onPointerCancelCapture
PointerEventHandler<HTMLDivElement>
-
onPointerEnter
PointerEventHandler<HTMLDivElement>
-
onPointerLeave
PointerEventHandler<HTMLDivElement>
-
onPointerOver
PointerEventHandler<HTMLDivElement>
-
onPointerOverCapture
PointerEventHandler<HTMLDivElement>
-
onPointerOut
PointerEventHandler<HTMLDivElement>
-
onPointerOutCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCapture
PointerEventHandler<HTMLDivElement>
-
onGotPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCapture
PointerEventHandler<HTMLDivElement>
-
onLostPointerCaptureCapture
PointerEventHandler<HTMLDivElement>
-
onScroll
UIEventHandler<HTMLDivElement>
-
onScrollCapture
UIEventHandler<HTMLDivElement>
-
onWheel
WheelEventHandler<HTMLDivElement>
-
onWheelCapture
WheelEventHandler<HTMLDivElement>
-
onAnimationStart
AnimationEventHandler<HTMLDivElement>
-
onAnimationStartCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationEnd
AnimationEventHandler<HTMLDivElement>
-
onAnimationEndCapture
AnimationEventHandler<HTMLDivElement>
-
onAnimationIteration
AnimationEventHandler<HTMLDivElement>
-
onAnimationIterationCapture
AnimationEventHandler<HTMLDivElement>
-
onToggle
ToggleEventHandler<HTMLDivElement>
-
onBeforeToggle
ToggleEventHandler<HTMLDivElement>
-
onTransitionCancel
TransitionEventHandler<HTMLDivElement>
-
onTransitionCancelCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionEnd
TransitionEventHandler<HTMLDivElement>
-
onTransitionEndCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionRun
TransitionEventHandler<HTMLDivElement>
-
onTransitionRunCapture
TransitionEventHandler<HTMLDivElement>
-
onTransitionStart
TransitionEventHandler<HTMLDivElement>
-
onTransitionStartCapture
TransitionEventHandler<HTMLDivElement>
-

On this page