Components

Components let you bundle up javascript functions and use them across your <ui-state> elements. Perfect for reusable widgets and complex interactions.

How Components Work

Register your component

MiniJS.register('counter', {
  increment() {
    this.state.count++
  }
  decrement() {
    this.state.count--
  }
})

Use it in your HTML

<ui-state component="counter" count="25">
  <div ui-text="count"></div>
  <button ui-click="increment">+</button>
  <button ui-click="decrement">-</button>
</ui-state>

Component Patterns

Method context

Inside component methods, you can access:

• this - refers to the component instance.
• this.state - the component's state object.
• this.refs - references to DOM elements with the ref attribute.
• this.customMethod() - call other methods defined in the component.

Use init() to set up your component

The init() method runs automatically when your component loads:

MiniJS.register('todo-app', {
  init() {
    this.state.todos = []
    this.state.newTodo = ''
  }
})

Methods become available in your HTML

Define methods in your component and call them with ui-click, ui-change, etc:

MiniJS.register('todo-app', {
  init() {
    this.state.todos = [
      { text: 'Learn Mini.js' },
      { text: 'Build a todo app' },
    ]
    this.state.newTodo = ''
  },

  addTodo() {
    const newTodo = this.state.newTodo.trim();
    if (!newTodo) return;

    this.state.todos.push(newTodo)
    this.state.newTodo = ''
  }
})

<ui-state component="todo-app" todos new-todo>
  <input ui-value="newTodo" ui-change="newTodo = this.value" />
  <button ui-click="addTodo">Add</button>
</ui-state>

Set initial values with HTML attributes

Any attribute on <ui-state> becomes state (except id, class, component, and style):

<ui-state component="user-form" first-name="John" last-name="Doe">
  <input ui-value="firstName" />
  <input ui-value="lastName" />
</ui-state>

Working with Refs

Use the ref attribute to access DOM elements directly in your component methods:

<ui-state component="list-manager" items>
  <div ref="output"></div>
  <button ui-click="addItem">Add</button>
</ui-state>

MiniJS.register('list-manager', {
  init() {
    this.state.items = ['Item 1', 'Item 2']
    this.render()
  },

  addItem() {
    this.state.items.push(`Item ${this.state.items.length + 1}`)
    this.render()
  },

  render() {
    const output = this.refs.output
    output.innerHTML = this.state.items
      .map(item => `<li>${item}</li>`)
      .join('')
  }
})

When To Use Components

Use components when:

• You have reusable UI patterns (modals, dropdowns, forms)
• You need complex event handling (like the OTP input example)
• You want to organize related functions together

Stick with regular <ui-state> when:

• You just need simple click/change interactions
• It's a one-off piece of functionality
• You're adding basic reactivity to existing HTML

That's Components!

Components are just a way to package up javascript functions and reuse them across your <ui-state> elements. Start simple and add complexity only when you need it.