Component

A Bare Component

A component is pretty simple :

• It has a render function that returns a Node.
• It has a state property.

That's All!

import Komponents

class MyFirstComponent: Component {

    var state = MyState()

    func render() -> Node {
        return Label("Hello!")
    }
}

View Controller Component

To use a component as a UIViewController and play nicely with UIKit apis, just subclass UIViewController and call loadComponent in loadView :)

class LoadingScreen: UIViewController, Component {

    // Just call `loadComponent` in loadView :)
    override func loadView() { loadComponent() }

    func render() -> Node {
        return ...
    }
}

You can now push and present your view controller like you used to, except this is now a powerful component! 😎

View Component

This is particularly handy to start migrating parts of the App to using components without breaking everything! To use a component as a UIView and play nicely with UIKit apis, just subclass UIView and call loadComponent in an init function :)

class MyCoolButton: UIView, Component {

    // Here we load the component
    convenience init() {
        self.init(frame:CGRect.zero)
        loadComponent()
    }

    func render() -> Node {
        return ...
    }
}

This way you have classic UIView that behaves like a component! 💪

View-Wrapped Component

Display your component in a UIView and use it wherever You want!

let view = ComponentView(component: MyComponent())

ViewController-Wrapped Component

Embbed your component in view Controller and present it anyway you want :)

let vc = ComponentVC(component: MyComponent())