0.2.7 • Published 7 years ago
mobx-react-connect v0.2.7
mobx-react-connect
Connect react component, mobx store and css module.
connect( StatelessComponent, Stores, CSSModule )
Features
- Only stateless component.
- Map observable stores to component.
- Easy to use css modules.
Install
npm install mobx-react-connect --save-dev
Example
Connect component and store.
Store class
// index.store.js
export default class Store {
@observable id = 0
constructor (props) {
const { id } = props
this.id = id
}
@computed
get userId () {
return this.id
}
@action.bound
increase() {
this.id++
}
}
React component.
// index.js
import { connect } from 'mobx-react-connect'
import Store from './index.store'
// functional component
const HelloView = (props, { store }) => {
return (
<h1>hello buddy. { store.userId } <a onClick={store.increase}>next</a></h1>
)
}
export default connect(HelloView, {
store: Store
})
Instantiate component.
import HelloView from './index'
<HelloView id={2} />
Connect component and CSS Modules
You won't need to set className for element like className={css.title}
any more.
- Set
clazz
attribute for element. Styles in css module will be combined intoclassName
. - Multiple style names is available, like
clazz='wrap title'
. clazz
andclassName
can be concurrent and styles will be joined together.
import { connect } from 'mobx-react-connect'
import css from './index.css'
const View = () => {
return (
<div clazz='green red'></div>
)
}
export default connect(View, {}, css)
index.css
- Styles for component
.green {
background-color: green;
}
.red {
color: red;
}
License
MIT