Lean, Simple Tab Component in Juris. In pure Javascript without any fancies abstractions.

#juris

Resti, Juris author, posted a nice video on creating a simple tab component : SimpleTab-Video

You an test it here : SimpleTab

Here is his code :

const juris = new Juris();

const SimpleTab = (props, { getState, setState }) => ({
  div: {
    children: [
      {
        div: {
          children: [
            { button: { text: "Tab 1", onclick: () => setState("activeTab", 0) } },
            { button: { text: "Tab 2", onclick: () => setState("activeTab", 1) } },
            { button: { text: "Tab 3", onclick: () => setState("activeTab", 2) } },
            { button: { text: "Tab 4", onclick: () => setState("activeTab", 3) } }
          ]
        }
      },
      {
        div: {
          children: () => {
            const active = getState("activeTab", 0);
            const contents = [
              { p: { text: "Tab 1 content" } },
              { p: { text: "Tab 2 content" } },
              { p: { text: "Tab 3 content" } },
              { p: { text: "Tab 4 content" } }
            ];
            return [ contents[active] ];
          }
        }
      }
    ]
  }
});

juris.registerComponent("SimpleTab", SimpleTab);
juris.layout = { SimpleTab: {} };
juris.render('#app');