Element Examples

Below you can find some advanced examples on how to create certain element functionality with Minze.

TIP

Check out the Creating Native Web Components article on codrops for a tutorial with practical examples about how to create native web components with Minze.

Recreating some basic functionality of the <a></a> link element with Minze.

Example

import Minze, { MinzeElement } from 'minze'

class CustomLink extends MinzeElement {
  attrs = ['href', 'target']

  css = () => `
    :host {
      display: inline-block;
    }

    :host(:hover) {
      cursor: pointer;
      text-decoration: underline;
    }
  `

  handleClick = () => {
    if (this.target && this.href) window.open(this.href, this.target)
    else if (this.href) location.href = this.href
  }

  eventListeners = [[this, 'click', this.handleClick]]
}

Minze.defineAll([CustomLink])
<custom-link href="https://google.com" target="_blank">
  Hello Minze!
</custom-link>

Input Wrapper

Creating a wrapper element around the <input /> element with Minze.

Example

import Minze, { MinzeElement } from 'minze'

class CustomInput extends MinzeElement {
  reactive = [['value', '', true]]

  attrs = ['placeholder', 'type', 'name']

  static observedAttributes = ['placeholder', 'type', 'name']

  html = () => `
    <input
      ${this.attrs
        .map((attr) => (this[attr] ? `${attr}="${this[attr]}"` : ''))
        .join(' ')}
      value="${this.value}"
    />
  `

  handleInput = (event) => {
    this.value = event.target.value
  }

  eventListeners = [['input', 'keyup', this.handleInput]]
}

Minze.defineAll([CustomInput])
<custom-input
  placeholder="Placeholder"
  type="text"
  name="my-input"
></custom-input>

Persistent Storage

Implementing persistent storage inside a Minze Element with Local Storage.

Example

import Minze, { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  reactive = [['count', 0]]

  watchCount = (newValue) => {
    localStorage.setItem('count', String(newValue))
  }

  watch = [['count', this.watchCount]]

  html = () => `
    <button>
      Count: ${this.count}
    </button>
  `

  onReactive() {
    const count = localStorage.getItem('count')
    if (count) this.count = Number(count)
  }

  handleClick = () => {
    this.count++
  }

  eventListeners = [['button', 'click', this.handleClick]]
}

Minze.defineAll([MyElement])
<my-element></my-element>