Skip to main content

useChildrens

The useChildrens hook allows a component to access the elements passed inside its tag. This is useful for handling slots or dynamically rendering child elements within a component.

Syntax​

<ErrorMessage>
  <p>Hello</p>
</ErrorMessage>

Inside ErrorMessage, useChildrens() will return:

const childrens = useChildrens();
console.log(childrens); // [<p>Hello</p>]

Example​

Injecting Child Elements​

<component>
  <p>This element is injected into the component.</p>
</component>
const { useChildrens } = DOMY;

const Component = DOMY.createComponent({
  html: `<template d-insert="childrens[0]"></template>`,
  app: () => {
    const childrens = useChildrens();
    return {
      childrens
    };
  }
});