spotlight/Spottable

Adds spottability to components.

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

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';

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

disabled: Whether or not the component is in a disabled state.
Default: false
onSpotlightDisappear: The handler to run when the component is removed while retaining focus.
onSpotlightDown: The handler to run when the 5-way down key is pressed.
onSpotlightLeft: The handler to run when the 5-way left key is pressed.
onSpotlightRight: The handler to run when the 5-way right key is pressed.
onSpotlightUp: The handler to run when the 5-way up key is pressed.
selectionKeys: 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: When true, the component cannot be navigated using spotlight.
Default: false
spotlightId: Used to identify this component within the Spotlight system
tabIndex: The tabIndex of the component. This value will default to -1 if left unset and the control is spottable.

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

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString