presentable v5.3.1

Decorator to facilitate the separation between the view and view model (presentable).

Table of contents

1. Installation
2. Basic usage
3. Adding the view
4. Default view
5. Context view
6. Advanced usage

Installation

npm install --save presentable

Basic usage

import React, { Component } from 'react'
import { presentable } from 'presentable'

// The render method does not need to be implemented in the view model.
@presentable
class MyViewModel extends Component {
  // Write your view model state and properties.
}

// If you try to render the view model without a view, it won’t render anything.
<MyViewModel/>
// Result: nothing

Adding the view

// The view is just a normal react component, it can even be a stateless component.
class SomeView extends Component {
  render() {
    // You can access the context, state and props from the view model.
    let { context, state, props } = this.props.viewModel
    // Write your view logic.
    return <span {...props}/>
  }
}

// Let’s render the previous view model with it.
<MyViewModel a="1" b="2" c="3" view={SomeView}/>
// Result: <span a="1" b="2" c="3"></span>

Default view

import { defaultView } from 'presentable'

// Sometimes you want your view model to have a default view.
@presentable
@defaultView(SomeView)
class AnotherViewModel extends Component {
  // ...
}

// As you can see, we are not passing the view as a property this time, but we
// should expect the same result as the previous one since we are using the same
// view to render a similar model.
<AnotherViewModel a="1" b="2" c="3"/>
// Result: <span a="1" b="2" c="3"></span>

Context view

// Sometimes you need to render multiple view models using the same view, in that
// case you can pass use the context.

import { ContextView } from 'presentable'

<ContextView view={SomeView}>
  <MyViewModel a="1" b="2" c="3"/>
  <MyViewModel a="4" b="5" c="6"/>
</ContextView>
// Result:
// <span a="1" b="2" c="3"></span>
// <span a="4" b="5" c="6"></span>

<ContextView view={SomeView}>
  <div>
    <div>
      <div>
        <div>
          {/* It does not matter how deep the component is in the tree. */}
          <MyViewModel a="1" b="2" c="3"/>
          <MyViewModel a="4" b="5" c="6"/>
        </div>
      </div>
    </div>
  </div>
</ContextView>

Advanced usage

import React, { Component } from 'react'
import {
  presentable,
  resolveView,
  resolveViewData
} from 'presentable'

class SomeView extends Component {
  render() {
    let {
      // You can access the view model instance directly if you need it, but
      // try to avoid it at all costs.
      instance
    } = this.props.viewModel
    // ...
  }
}

@presentable
class SomeViewModel extends Component {
  // Optionally you can define this method if you need to transform/filter the
  // props and state being passed to the view. The default implementation is as
  // follows:
  getViewData() {
    return resolveViewData(this)
  }

  // Optionally you can define this method to use a custom logic to locate the
  // view. The default implementation is as follows:
  getView() {
    return resolveView(this)
  }
}