han4wluc / mobx-react-bind

Installation

npm install mobx-react-bind

or

yarn add mobx-react-bind

Usage

Basic Usage

Define a mobx store

import { observable, action } from 'mobx'

class CounterContainer {
  @observable
  count = 0

  @action
  increment = () => {
    this.count = this.count + 1
  }
}

Define a react stateless component

function CounterView(props) {
  const { container } = props
  return (
    <div onClick={container.increment}>{container.count}</div>
  )
}

Bind mobx store and react view

import mobxReactBind from 'mobx-react-bind'

const CounterComponent = mobxReactBind({
  container: CounterContainer,
})(CounterView)


// You can then just use it as a usual react component
<CounterComponent />

React lifecycle methods

In the mobx store, you can add a mount method that will be called when the component is mounted.

It also accepts a function as a return value that will be called when the component is unmounted.

class CounterContainer {
  
  mount = () => {
    console.log('mount')
    return () => {
      console.log('unmount')
    }
  }
}