Enact
Edit on GitHub

ui/Marquee

A component that will marquee its overflowing contents.

import Marquee from '@enact/ui/Marquee';

Members

MarqueeComponent

A minimally-styled marquee component.

import Marquee from '@enact/ui/Marquee';

MarqueeBaseComponent

Marquees the children of the component.

For automated marquee calculations use ui/Marquee.Marquee.

import {MarqueeBase} from '@enact/ui/Marquee';
Properties
alignment
String

Text alignment value of the marquee

Valid values are:

  • 'left',

  • 'right', and

  • 'center'

animating
Boolean

Applies animating styles such as removing the ellipsis.

aria-label
String

Sets the value of the aria-label attribute for the wrapped component.

children
Node

The text or a set of components that should be marqueed

This prop may be empty in some cases, which is OK.

clientRef
Function

Called when mounting or unmounting with a reference to the client node

css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal Elements and states of this component.

The following classes are supported:

  • marquee - The root component class

  • animate - Applied to the inner content node when the text is animating

  • spacing - The spacing node used between the repeated content

  • text - The inner content node

  • willAnimate - Applied to the inner content node shortly before animation

distance
Number

Distance to animate the marquee

Usually, the distance is the width of the text minus the width of the container

onMarqueeComplete
Function

Called when the marquee completes its animation

overflow
'clip''ellipsis'

Text overflow setting. Either 'clip' or 'ellipsis'

rtl
Boolean

true if the directionality of the content is right-to-left

Default: false
spacing
Number

Amount of spacing, in pixels, between the instances of the content

Default: 0
speed
Number

Speed of marquee animation in pixels/second.

willAnimate
Boolean

Indicates the marquee will animate soon.

Should be used by the component to prepare itself for animation such as promoting composite layers for improved performance.

Default: false

MarqueeControllerHigher-Order Component

A higher-order component that synchronizes contained Marquees.

import {MarqueeController} from '@enact/ui/Marquee';
Configuration
marqueeOnFocus
Boolean

When true, any onFocus events that bubble to the controller will start the contained Marquee instances. This is useful when a component contains Marquee instances that need to be started when sibling components are focused.

Default: false

MarqueeDecoratorHigher-Order Component

A higher-order component that provides marquee functionalities.

Note: This HoC passes additional properties to the wrapped component and wraps the children prop with an additional component necessary for rendering the marquee.

import {MarqueeDecorator} from '@enact/ui/Marquee';
Configuration
blur
String

Property containing the callback to stop the animation when marqueeOn is 'focus'

Default: 'onBlur'
className
String

Optional CSS class name to customize the marquee component

Default: null
component
Component

The base marquee component wrapping the content.

Default: ui/Marquee.Marquee
enter
String

Property containing the callback to start the animation when marqueeOn is 'hover'

Default: 'onMouseEnter'
focus
String

Property containing the callback to start the animation when marqueeOn is 'focus'

Default: 'onFocus'
invalidateProps
ArrayString

Invalidate the distance if any property (like 'inline') changes. Expects an array of props which on change trigger invalidateMetrics.

Default: ['remeasure']
leave
String

Property containing the callback to stop the animation when marqueeOn is 'hover'

Default: 'onMouseLeave'
marqueeDirection
Function

A function that determines the text directionality of a string.

Returns:

  • 'rtl' if the text should marquee to the right

  • 'ltr' if the text should marquee to the left

Properties added to wrapped component
alignment
String

Text alignment value of the marquee. Valid values are 'left', 'right' and 'center'.

children
Node

Children to be marqueed

disabled
Boolean

Passed through to the wrapped component.

Does not affect Marquee behavior except that components that are marqueeOn="focus" will be treated as if they were marqueeOn="hover", to allow disabled (and thus, unfocusable) components to marquee.

forceDirection
String

Forces the direction of the marquee.

Valid values are 'rtl' and 'ltr'. This includes non-text elements as well. The default behavior, if this prop is unset, is to evaluate the text content for directionality using i18n/util.isRtlText.

locale
String

The current locale as a BCP 47 language tag.

marqueeDelay
Number

Number of milliseconds to wait before starting marquee when marqueeOn is 'hover' or 'focus' or before restarting any marquee.

Default: 1000
marqueeDisabled
Boolean

Disables all marquee behavior and removes supporting markup.

marqueeOn
'focus''hover''render'

Determines what triggers the marquee to start its animation.

Default: 'focus'
marqueeOnRenderDelay
Number

Number of milliseconds to wait before starting marquee the first time.

Has no effect if marqueeOn is not 'render'

Default: 1000
marqueeResetDelay
Number

Number of milliseconds to wait before resetting the marquee position after it finishes.

A minimum of 40 milliseconds is enforced.

Default: 1000
marqueeSpacing
StringNumber

Amount of spacing between the instances of the content when animating.

May either be a number indicating the number of pixels or a string indicating the percentage relative to the width of the component.

Note: When using a number, the value should be based on 1920x1080 display and will be scaled automatically for the current resolution using ui/resolution.

Default: '50%'
marqueeSpeed
Number

Rate of marquee measured in pixels/second.

Default: 60
rtl
String

Indicates the text directionality of the current locale is right-to-left

ArrayBooleanFunctionModuleNumberObjectString