@hypericon/mico NPM

Mico

Mithril Components

UI components and utilities built with Mithril.

NPM badge

Since version 0.4.0, includes ESM and CJS versions.

Installation

$ npm i @hypericon/mico

Usage

View usage documentation and examples here.

Example

Import the components from the package. Some components may also export functions to build typed versions. Components that have customisable styles have their CSS classes of config attributes documented on the documentation site

import m from "mithril";
import { typedTable } from "@hypericon/mico";
import { Widget } from "../interfaces"; // Example
import { WidgetService } from "../services"; // Example
import { WidgetStatusIcon } from "../components"; // Example

const WidgetTable = typedTable<Widget>();

const ExamplePage: m.Component = {
  view() {
    return m("", [
      m("h1", "Widgets"),
      m(WidgetTable, {
        data: WidgetService.widgets,
        columns: [
          WidgetTable.col("Position", (w, i) => i + 1), // Row index is supplied
          WidgetTable.col("Name", w => w.name), // Type checking on row object properties
          WidgetTable.col("Price", w => `£${w.price}`),
          WidgetTable.col("Status", w => m(WidgetStatusIcon, { widget: w })),
          // etc.
        ],
      }),
    ]);
  }
};