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

    

  


  


  

    
Pubsub example

    

      cell
      supports pubsub pattern with "pub" and "sub" methods.
    

    
JS

    
const EVENT = "my-event";

function PubComponent({ on, pub }) {
  on.click = () => {
    pub(EVENT, { hello: "clicked!" });
  };
}

function SubComponent({ el, on, sub }) {
  sub(EVENT);

  on[EVENT] = (e) => {
    el.textContent += " " + e.detail.hello;
  };
}

register(PubComponent, "js-pub-component");
register(SubComponent, "js-sub-component");

    
    
HTML

    

    
Result

    

  


  


  

    
Event delegation example

    

      Cell supports
      Event delegation
      pattern.
    

    
    
JS

    
function Delegation({ on, query }) {
  on(".btn").click = () => {
    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, on }) {
  on.outside.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.