Skip to main content

useNames

The useNames hook allows a component to access registered child elements that have been assigned a specific name using the d-name directive. This is useful for managing named slots or dynamically manipulating specific child elements within a component.

Syntax​

<ErrorMessage>
  <p d-name="example">Hello</p>
</ErrorMessage>

Inside ErrorMessage, useNames() will return:

const names = useNames();
console.log(names['example']); // [<p>Hello</p>]

Example​

Injecting Named Child Elements​

<component>
  <p d-name="header">This header is injected into the component.</p>
  <p d-name="footer">This footer is injected into the component.</p>
</component>
const { useNames } = DOMY;

const Component = DOMY.createComponent({
  html: `
    <div>
        <template d-insert="names['header']"></template>
        <div>Main content</div>
        <template d-insert="names['footer']"></template>
    </div>
  `,
  app: () => {
    const names = useNames();
    return {
      names
    };
  }
});