v0.2.18

MeoNode UI v0.2.18 – Portal Enhancements & Function Children Support

Release Date: 2025-09-19

What's New

• Core:
  • Added support for function children with improved rendering logic.
  • Enhanced portal system with an update method and new NodePortal type.
• Hooks: Introduced usePortal hook to enable reactive portal behavior tied to state changes.

Example

A simple example using usePortal to make a portal reactive to state updates:

import { Button, Div, Node, Portal, type PortalProps } from "@meonode/ui";
import { usePortal } from "@meonode/ui";
import { useState } from "react";

const PortalContent = ({ portal }: PortalProps<{ text: string }>) => {
  return Div({
    children: [
      "This is portal content!",
      state >= 1 ? text : "Initial text value",
      Button(`Update Portal (${state + 1})`, {
        onClick: () => setState((s: number) => s + 1),
      }),
      Button("Close Portal", {
        onClick: () => portal?.unmount(),
      }),
    ],
  }).render();
};

const MyPortal = () => {
  const [state, setState] = useState<number>(0);
  const { setPortal, createComponent } = usePortal([state]);

  const PortalContentComp = createComponent(
    ({ portal }: PortalProps<{ text: string }>) =>
      PortalContent({ text: "Hello there" }),
  );

  return Div({
    children: [
      Button("Open Portal", {
        onClick: () => {
          const portal = Portal<{ text: string }>(PortalContent)();
          setPortal(portal);
        },
      }),
    ],
  }).render();
};

Version Update

• Incremented version to 0.2.18.

Changelog & Commits

• View Full Changelog
• Browse All Commits