ui:useProps

Use props from another component.

This ViewHelper allows you to import all props from another component and register them for the current component. This is helpful/needed when consuming the primitives components or when you want to reuse props from another component.

You can also override default values of the imported props by passing a defaults array with key-value pairs.

Examples

Tooltip/Root.html that uses the tooltip primitive:

<ui:useProps name="primitives:tooltip.root" defaults="{openDelay: 200}" />

<primitives:tooltip.root spreadProps="{true}">
    <f:slot />
</primitives:tooltip.root>

If you dont want all props from a component, you can also selectively import props by passing an array of prop names to the props argument.

<ui:useProps name="primitives:tooltip.root" props="{0: 'openDelay', 1: 'closeDelay'}" />

// ...

Limitation

Currently its not possible to use this useProps and spreadProps pattern with required arguments because of how Fluid parses the templates. If a prop for a primitive is required, we use the ui:error ViewHelper to manually throw an error if the prop is not set.

Arguments