core/hoc

Provides the core/hoc.hoc method to create Higher-Order Components (HOCs).

import hoc from '@enact/core/hoc';

Members

hocFunction

hoc(defaultConfig, hawk)Function

Constructs a Higher-order Component using an optional set of default configuration parameters and a factory method that accepts instance configuration parameters and a component to wrap. The returned function can accept:

  • an instance config and a component constructor to wrap and return a renderable component, or

  • an instance config only and return a decorator function expecting a component constructor (like the next bullet), or

  • a component constructor and return a renderable component

Example:

const Countable = hoc({prop: 'data-count'}, (config, Wrapped) => {
	return class extends React.Component {
		constructor (props) {
			super(props);
			this.state = {
				count: 0
			};
		},
		inc = () => this.setState({count: this.state.count + 1}),
		render () {
			const props = Object.assign({}, this.props, {
				[config.prop]: this.state.count,
				onClick: this.inc
			});
			return <Wrapped {...props} />
		}
	}
});

const CountableAsDataNumber({prop: 'data-number'});
const CountableDiv('div');
const CountableDivAsDataNumber = CountableAsDataNumber('div');
2 Params
defaultConfig Object

Set of default configuration parameters

hawk Function

Higher-order component

Returns
Function

HoC Decorator

ArrayBooleanFunctionModuleNumberObjectString