Cell examples

This page shows the examples of cell frontend library.

Mirroring example

The example of mirroring the input value to another dom.

JS

function Mirroring({ on, query }) {
  on("input", () => {
    query(".dest").textContent = query(".src").value
  })
}

register(Mirroring, "js-mirroring")

HTML

Result

Returning HTML from component

If you return string from your component function, that string becomes the body your mounted element.

JS

function Hello({ el }) {
  return `Hello, I'm ${el.textContent}! 👋`
}

register(Hello, "js-hello")

HTML

Result

Event delegation example

Cell supports Event delegation pattern.

JS

function Delegation({ on, query }) {
  on("click", ".btn", () => {
    query(".result").textContent += " .btn clicked!"
  })
}

register(Delegation, "js-delegation")

HTML

Result

Outside event example

When you're creating floating UI patterns such as tooltips or modal dialogs, you often need to handle the events "outside" of the target dom. Cell supports this pattern with "on.outside[eventName]".

JS

function OutsideComponent({ el, onOutside }) {
  onOutside("click", () => {
    el.textContent += " outside clicked!"
  })
}

register(OutsideComponent, "js-outside-example")

HTML

Result

Prevent default example

If you need to preventDefault or stopPropagation, you can access it via '.e' prop.

JS

function PreventDefaultComponent({ on }) {
  on("click", (e) => {
    e.preventDefault()
    alert("A link is clicked, but the page doesn't move to the target url because the default behavior is prevented ;)")
  });
}

register(PreventDefaultComponent, "js-prevent-default-example")

HTML

Result

More details about cell library is available in the github repository.