❤
npm
Sign UpSign In

mobx-component
TypeScript icon, indicating that this package has built-in type declarations

0.2.3 • Public • Published

mobx-component

Build Status Dependency Status devDependency Status

Installation

$ npm install --save mobx-component

What's all this now?

MobX with React is awesome, but it tends to push you towards having just a single prop per React component, because the top-level props cannot be @observable. For example suppose you have this model:

import { observable, computed } from 'mobx'
 
class XYZ {
  @observable x: number = 3
  @observable y: number = 9
  @computed get z() { return this.x * this.y }
}

You want to render it with a stateless function component which just takes x y and z props and renders them:

import * as React from 'react
import { observer } from 'mobx-react'
 
const Adder = observer<XYZ>(({ x, y, z }) => <span>{x} + {y} + {z} = {x + y + z}</span>)

Unfortunately this won't work; the properties get copied over and lose their "observability" before the render function is called by React. So instead you have to write it something like:

const Adder = observer<{ xyz: XYZ }>(({ xyz: { x, y, z }) => <span>{x} + {y} + {z} = {x + y + z}</span>)

Not quite as nice. Using this mobx-component you can write it the first way:

import { component } from 'mobx-component'
 
const Adder = component<XYZ>(({ x, y, z }) => <span>x + y + z = {x + y + z}</span>)

The resulting Adder component has a single prop model: XYZ, so you would use it like so:

import { render } from 'react-dom'
 
const xyz = new XYZ()
 
ReactDOM.render(<Adder model={xyz} />)
// renders: <span>3 + 9 + 27 = 39</span>
 
xyz.x = 4
// renders: <span>4 + 9 + 36 = 49</span>

Readme

Keywords

Package Sidebar

Install

npm i mobx-component

Repository

github.com/pelotom/mobx-component

Homepage

github.com/pelotom/mobx-component#readme

Weekly Downloads

2

Version

0.2.3

License

MIT

Last publish

Collaborators

  • pelotom
Try on RunKit
Report malware