qinkangwu/mobx-preact

MobX bindings for Preact

mobx-preact

This is a fork of mobx-react for Preact

This package provides the bindings for MobX.

It's not really maintained, if someone wants to take over, ping me on github!

Consider using mobx-observer or another library instead.

Exports the connect (or alias observer) decorator and some development utilities.

Installation

npm install mobx-preact --save

Also install mobx dependency (required) if you don't already have it

npm install --save mobx

Example

You can inject props using the following syntax

// MyComponent.js
import { h, Component } from 'preact';
import { connect } from 'mobx-preact';

@connect(['englishStore', 'frenchStore'])
class MyComponent extends Component {
    render({ englishStore, frenchStore }) {
        return <div>
            <p>{ englishStore.title }</p>
            <p>{ frenchStore.title }</p>
        </div>
    }
}

export default MyComponent

Just make sure that you provided your stores using the Provider. Ex:

// index.js
import { h, render } from 'preact';
import { Provider } from 'mobx-preact'
import { observable } from 'mobx'
import MyComponent from './MyComponent'

const englishStore = observable({
    title: 'Hello World'
})

const frenchStore = observable({
    title: 'Bonjour tout le monde'
})

render(<Provider englishStore={ englishStore } frenchStore={ frenchStore }>
    <MyComponent/>
</Provider>, document.body)