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.

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

  • 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
String

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

rtl
Boolean

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

Default: false
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.

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
Array

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.

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
String

Determines what triggers the marquee to start its animation.

Valid values are 'focus', 'hover' and 'render'. The default is 'focus'.

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
marqueeSpeed
Number

Rate of marquee measured in pixels/second.

Default: 60
ArrayBooleanFunctionModuleNumberObjectString