JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.6.1.nomodule.min.js"></script>

JavaScript

const {button, div} = van.tags

const Label = ({text, onmount}) => {
  if (onmount) {
    const trigger = van.state(false)
    van.derive(() => trigger.val && onmount())
    trigger.val = true
  }
  return div({class: "label"}, text)
}

const App = () => {
  const counter = van.state(0)
  return div(
    div(button({onclick: () => ++counter.val}, "Increment")),
    () => Label({
      text: counter.val,
      onmount: () => document.getElementById("msg").innerText =
        "Current label: " + document.querySelector(".label").innerText,
    }),
    div({id: "msg"}),
  )
}

van.add(document.body, App())