Mithril Component
React style components for Mithril.js
Install
- Download the latest package
- NPM:
npm install mithril-component
Usage
Node.js / Browserify
// Include mithrilvar m = // Pass mithril to the component system.// Only required to overload once, subsequent overloads will// return the same instancem
Browser
Documentation
m.createComponent(Object specification)
Creates and returns a component class constructor which takes two arguments:
Function
Component specification requires a view
method which returns a mithril node element. Components specification may also contain a controller
method which is ran when the class is created, values returned will be set on this.state
, to learn more see Specification Object.
Specification Object
-
specification.controller(Object props, Array children)
Invoked immediately when used within another mithril element as a child.
Using Promises
Supports returning A+ promises, when a promise is returned inside of the controller method, the result is caught by a wrapper which then attaches itself to the
then
andcatch
(should it exist) methods. On success the promise resultdata
replacescomponent.state
. On errorcomponent.onControllerError
is invoked with the error passed as the first argument. -
specification.view()
Render method, should return a mithril element. -
specification.onControllerError(Object error)
Invoked when a returned promise fails. -
specification.onUnload()
Invoked when component is unloaded.
Component Class Object
When ComponentClassConstructor
is invoked the resulting object contains the following properties.
component.state
Component class internal statecomponent.props
Component class properties passed from parentcomponent.setState(Object State)
Setscomponent.state
and invokesm.redraw(true)
component.controller(Object props, Array children)
component.view()
Render method, should return a mithril element.component.onControllerError(Object error)
Invoked when a returned promise fails.component.onUnload()
Invoked when component is unloaded.
Example Usage
- Basic usage w/ Children props ( React Equivalent )
var CheckLink = m m
- Controller usage
var TimerComponent = m m
License
Licensed under The MIT License.