spotlight/Spottable

Adds spottability to components.

import Spottable from '@enact/spotlight/Spottable';

Members

SpottableHigher-Order Component

Constructs a Spotlight 5-way navigation-enabled higher-order component.

Note: This HoC passes a number of props to the wrapped component that should be passed to the main DOM node.

Example:

const Component = ({myProp, ...rest}) => (
	<div {...rest}>{myProp}</div>
);
...
const SpottableComponent = Spottable(Component);
import Spottable from '@enact/spotlight/Spottable';
Configuration
emulateMouse
Boolean

Whether or not the component should emulate mouse events as a response to Spotlight 5-way events.

Default: true
Properties added to wrapped component
disabled
Boolean

Whether or not the component is in a disabled state.

Default: false
handleForceUpdate
Function

The handler to force update the component.

onSpotlightDisappear
Function

The handler to run when the component is removed while retaining focus.

onSpotlightDown
Function

The handler to run when the 5-way down key is pressed.

onSpotlightLeft
Function

The handler to run when the 5-way left key is pressed.

onSpotlightRight
Function

The handler to run when the 5-way right key is pressed.

onSpotlightUp
Function

The handler to run when the 5-way up key is pressed.

selectionKeys
ArrayNumber

An array of numbers representing keyCodes that should trigger mouse event emulation when emulateMouse is true. If a keyCode equals a directional key, then default 5-way navigation will be prevented when that key is pressed.

Default: [13, 16777221]
spotlightDisabled
Boolean

When true, the component cannot be navigated using spotlight.

Default: false
spotlightId
String

Used to identify this component within the Spotlight system

tabIndex
Number

The tabIndex of the component. This value will default to -1 if left unset and the control is spottable.

spottableClassstring

The class name for spottable components. In general, you do not need to directly access this class

ArrayBooleanFunctionModuleNumberObjectString