ui/Skinnable

A higher-order component for customizing the visual appearance throughout an application.

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

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.

Note: This HoC passes className to the wrapped component. It must be passed to the main DOM node. Additionally, it can be configured to pass the skin and skin variant as props.

Example:

const MyApp = ({skinName, ...rest) => (<div {...props}>{skinName}</div>);
...
App = Skinnable({
	prop: 'skinName',
	skins: {
		dark: 'moonstone',
		light: 'moonstone-light'
	},
	defaultTheme: 'dark'
	defaultVariants: ['highContrast'],
	allowedVariants: ['highContrast', 'largeText', 'grayscale']
}, MyApp);
import Skinnable from '@enact/ui/Skinnable';
Configuration
variantsProp
String

The prop in which to pass the skinVariants value to the wrapped component. The recommended value is "skinVariants".

If left unset, the skinVariant will not be passed to the wrapped component.

prop
String

The prop in which to pass the effective skin to the wrapped component.

If left unset, the current skin will not be passed to the wrapped component.

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.

defaultVariants
ArrayStringString

Initial collection of applied variants

This will be used if the instantiator of the wrapped component provides no value to the skinVariants prop.

allowedVariants
ArrayString

A complete list of all supported variants.

These will translate to CSS class names so should not conflict with any skin names. CamelCase is recommended for the values.

Properties added to wrapped component
skin
String

The name of the skin a component should use to render itself. Available skins are defined in the "defaultConfig" for this HOC.

skinVariants
ArrayStringStringObject

The variant(s) on a skin that a component should use when rendering. These will typically alter the appearance of a skin's existing definition in a way that does not override that skin's general styling.

Multiple data types are supported by this prop, which afford different conveniences and abilities. String and Array are effectively the same, supporting just additions to the variants being applied to a component, and are much more convenient. Objects may also be used, and have the ability to disable variants being passed by their ancestors. Objects take the format of a basic hash, with variants as key names and true/false Booleans as values, depicting their state. If a variant is excluded from any version of data type used to set this prop, that variant will ignored, falling back to the defaultVariant or parent variant, in that order.

skinVariants examples:

 // String
 skinVariants="highContrast"

 // Array
 skinVariants={['highContrast']}

 // Object
 skinVariants={{
 	highContrast: true,
 	grayscale: false
 }}

SkinContextHigher-Order Component

Allows a component to respond to skin changes via the Context API

Example:

<App skin="dark">
	<Section>
		<Button>Gray Button</Button>
	<Section>
	<Popup skin="light">
		<Button>White Button</Button>
	</Popup>
</App>
import {SkinContext} from '@enact/ui/Skinnable';
ArrayBooleanFunctionModuleNumberObjectString