switcher-component

Switches display of children elements/components.

Usage

import { SwitcherComponent } from 'switcher-component'
import html from 'nanohtml'

class MyComponent extends SwitcherComponent {
  constructor() {
    super()
    // Children can be either
    // a component with a render() method,
    // or anything nanohtml can process.
    this.children = [component1, html`<div>hello</div>`]
  }

  toggle() {
    if (this.index === 1) {
      this.index = 0
    } else {
      this.index = 1
    }
  }
}

API

export { SwitcherComponent }
export default SwitcherComponent

SwitcherComponent

Extends nanocomponent.

#children

The children of this component.

Changing the value of this property will trigger a render.

For array mutations, manually trigger a render.

#index

The index of the component to show.

Changing the index will trigger a non-rerendering update.