Enact

ui/Skinnable

Exports the ui/Skinnable.Skinnable Higher-order Component (HOC).

This is the base-level implementation of this component. It will typically never be accessed directly, and only be instantiated with a configuration once inside a visual-library like moonstone/Skinnable. Interface libraries will supply a set of supported skins which will be accessible to their components.

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

Members

SkinnableHigher-Order Component

Skinnable is a Higher-order Component that assigns skinning classes for the purposes of styling children components.

Use the config options to specify the skins your theme has. Set this up in your Theme's decorator component to establish your supported skins.

Example:

App = Skinnable({
	skins: {
		dark: 'moonstone',
		light: 'moonstone-light'
	},
	defaultTheme: 'dark'
}, App);
import Skinnable from '@enact/ui/Skinnable';
Configuration
skins
Object

A hash mapping the available skin names to their CSS class name. The keys are accepted as the only valid values for the skin prop on the wrapped component.

defaultSkin
String

Assign a default skin from the skins list. This will be used if the instantiator of the wrapped component provides no value to the skin prop.

Properties added to wrapped component
skin
String

Select a skin by name. The list of available skins is established by the direct consumer of this component via the config options. This will typically be done once by the theme decorator, like MoonstoneDecorator which will supply the list of skins.

withSkinnablePropsHigher-Order Component

Occasionally, there's a case where context isn't available or your component only updates on specific props changes. This HOC supplies the relevant context state values as props. In this case, skin is avaliable as a prop to the wrapped component.

import {withSkinnableProps} from '@enact/ui/Skinnable';
ArrayBooleanFunctionModuleNumberObjectString