Wrapping Content

The mount and render functions can be used to create a view from arbitrary supported content.

JSXNo Build

import { render } from "rvx";

const view = render(<>Hello World!</>);

import { render } from "rvx";

const view = render("Hello World!");

The mount function also appends the created view to a parent node until the current lifecycle is disposed.

JSXNo Build

import { mount } from "rvx";

mount(document.body, <>Hello World!</>);

import { mount } from "rvx";

mount(document.body, "Hello World!");

Portalling

In addition to being the entry point of your application, the mount function allows you to render content into a different part of the DOM. This is commonly known as "portalling" in other frameworks.

Warning

Avoid directly mounting content into other places rendered by rvx.

If you need to, you can provide a slot that other code can render into using <Nest> / nest or read about external mutations.

JSXNo Build

import { mount, capture } from "rvx";

// Mount some content and capture it's lifecycle:
const unmount = capture(() => {
    mount(document.body, <>Hello World!</>);
});

// Unmount:
unmount();

import { mount, capture } from "./rvx.js";

// Mount some content and capture it's lifecycle:
const unmount = capture(() => {
    mount(document.body, "Hello World!");
});

// Unmount:
unmount();

This can be used to implement things like popovers, dialogs or any other kind of floating content:

JSXNo Build

import { $, mount, watch } from "rvx";

function ExamplePopover() {
    const visible = $(false);

    // Watch automatically takes care of the lifecycle:
    watch(visible, visible => {
        if (visible) {
            mount(document.body, <div>Hello World!</div>);
        }
    });

    return <button on:click={() => { visible.value = !visible.value }}>
        Toggle Popover
    </button>;
}

import { $, mount, watch, e } from "./rvx.js";

function ExamplePopover() {
    const visible = $(false);

    // Watch automatically takes care of the lifecycle:
    watch(visible, visible => {
        if (visible) {
            mount(document.body, e("div").append("Hello World!"));
        }
    });

    return e("button").on("click", () => { visible.value = !visible.value }).append(
        "Toggle Popover",
    );
}