use-child-nodes

Captures all nodes not created by the webcomponent render, ideal for apply slot polyfill in LightDOM.

Modulo
import { useChildNodes } from "@atomico/hooks/use-child-nodes";
Syntax
const [childNodes, update] = useChildNodes();
Where :
1.childNodes : List of nodes that do not belong to the webcomponent render.
2.update: Callback that forces a new childNodes scan.
Example
function component() {
  const [childNodes] = useChildNodes();
  return (
    <host>
      {childNodes
        .filter((node) => node.localName == "h1")
        .map((Title) => (
          <Title onclick={() => console.log("click h1!")} />
        ))}
    </host>
  );
}
From the example we can highlight that the webcomponent will use all the children not created by the h1 type and will associate the onclick handler with them.

use-async-effect

use-force-render

Last modified 1yr ago