enact logoEnact
Edit on GitHub

ui/ComponentOverride

A utility component that either clones or creates a component instance based on the incoming component prop value.

This allows you to supply JSX as the component used in your prop allowing you to add your own properties. They'll get mixed onto the component when it's used in the parent component.

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

Members

ComponentOverrideComponent

Utility to either create or clone a component instance with the given set of props.

ComponentOverride can be used to support props that either accept a type, (e.g. Button) or an element (e.g. <Button customProp="value" />) and return a new element which includes the remaining props specified.

Example:

const LabeledIconButton = ({iconComponent, label, ...rest}) => {
  return (
    <div {...rest}>
      <ComponentOverride
        component={iconComponent}
        icon="house"
      />
      <span>{label}</span>
    </div>
  );
};

// Usage

// Only the props defined by LabeledIconButton will be passed to CustomIcon
<LabeledIconButton
  label="Home"
  iconComponent={CustomIcon}
/>

// The color prop along with props defined by LabeledIconButton will be passed to CustomIcon
<LabeledIconButton
  label="Home"
  iconComponent={
    <CustomIcon color="green" />
  }
/>
import ComponentOverride from '@enact/ui/ComponentOverride';
ArrayBooleanFunctionModuleNumberObjectString