# mithril-utils

> Utilities for Mithril

Latest version **0.1.0** (published 2017-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install mithril-utils
pnpm add mithril-utils
yarn add mithril-utils
bun add mithril-utils
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-09-13 |
| First published | 2017-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Niklas Heise |
| Maintainers | nheise |
| Keywords | mithril, utility, util, attributes |

## Links

- npm: https://www.npmjs.com/package/mithril-utils
- Repository: https://github.com/nheise/mithril-utils
- Homepage: https://github.com/nheise/mithril-utils#readme
- Issues: https://github.com/nheise/mithril-utils/issues
- npm.io page: https://npm.io/package/mithril-utils

## Dependencies (1)

- [mithril](https://npm.io/package/mithril.md) ^1.1.3

## Alternatives

- [lodash.assign](https://npm.io/package/lodash.assign.md) — 2.3M weekly downloads
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) — 1.8M weekly downloads
- [react-native-ios-utilities](https://npm.io/package/react-native-ios-utilities.md) — 138.5K weekly downloads
- [@technically/lodash](https://npm.io/package/@technically/lodash.md) — 50.9K weekly downloads
- [@fluid-topics/ft-icon](https://npm.io/package/@fluid-topics/ft-icon.md) — 20.6K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-09-13

## README

# mithril-utils

[Usage](#usage) | [API](#api)

Utilities for Mithril

## Usage

### Simple Usage

For simple useage, import the hole utilities bundle via require import.

```javascript
var m = require('mithril')
var mu = require('mithril-utils')

var div = m( "div", mu.attrs.onclick( executeMeWhenDivClicked ) )
```

To reduce dependencies, you can import modules the direct way.

```javascript
var m = require('mithril')
var onclick = require('mithril-utils/attrs/onclick')

var div = m( "div", onclick( executeMeWhenDivClicked ) )
```

### Create CSS Class Attribute

```javascript
var toClass = require("mithril-utils/attrs/toClass")
var div = m( "div", toClass( {
  "highlight": ctrl.isHighlighted(),
  "bold": ctrl.isBold(),
  "italic":  ctrl.isItalic()
  } ) )

// when ctrl.isHighlighted() == true
// when ctrl.isBold() == false
// when ctrl.isItalic() == true
// will create { 'class': 'highlight italic' }
```

### Create Event bi-directional binding

```javascript
m( "input", mu.attrs.onchange( model.description ) )
```

---

## API

### Attrs module bundle

The attrs module bundles functionality to create the attributes object for the mithril m function

#### Object attrs.toClass( Object css [Object prevGenAttr] )

The toClass function will create from a give object like this:

```javascript
var css = {
  "highlight": isHighlighted(),
  "bold": isBold(),
  "italic":  isItalic()
}
```
When the evaluation of the values are like this:

```javascript
isHighlighted() == true
isBold() == false
isItalic() == true
```
It returnd an object that can be used to stile that div as shown:

```javascript
m( "div", { 'class': 'highlight italic' } )
```
---

#### Object attrs.onclick( Function fn [,Object prevGenAttr] )

Creates an object:
```javascript
{ "onclick": fn }
```
That can be used to create a button like this:
```javascript
m( "button", attrs.onclick( fn ) )
```
---

#### Object attrs.onchange( Function fn [, Object prevGenAttr] )

Creates an object:
```javascript
{ 
  "onchange": m.withAttr( "value", fn ),
  "value": fn()
}
```
That can be used to create a bi-directional binding like this:

```javascript
m( "input", attrs.onchange( fn ) )
```

---
_Source: https://npm.io/package/mithril-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._