Connect react component, mobx store and css modules.
npm install mobx-react-connectjs
npm install mobx-react-connect --save-dev
`
Example
$3
Store class
`js
// 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.
`js
// index.js
import { connect } from 'mobx-react-connect'
import Store from './index.store'
// functional component
const HelloView = (props, { store }) => {
return (
hello buddy. { store.userId } next
)
}
export default connect(HelloView, {
store: Store
})
`
Instantiate component.
`js
import HelloView from './index'
`
$3
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 into className.
- Multiple style names is available, like clazz='wrap title'.
- clazz and className can be concurrent and styles will be joined together.
`js
import { connect } from 'mobx-react-connect'
import css from './index.css'
const View = () => {
return (
)
}
export default connect(View, {}, css)
`
index.css - Styles for component
`css
.green {
background-color: green;
}
.red {
color: red;
}
``