https://github.com/tvrcgo/mobx-react-connect
Connect react component, mobx store and css modules.
https://github.com/tvrcgo/mobx-react-connect
css-modules mobx mobx-react react
Last synced: 9 months ago
JSON representation
Connect react component, mobx store and css modules.
- Host: GitHub
- URL: https://github.com/tvrcgo/mobx-react-connect
- Owner: tvrcgo
- License: mit
- Created: 2017-01-16T06:45:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-17T09:25:15.000Z (almost 9 years ago)
- Last Synced: 2025-03-28T18:54:10.355Z (10 months ago)
- Topics: css-modules, mobx, mobx-react, react
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 12
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```js
npm install mobx-react-connect --save-dev
```
## Example
### Connect component and store.
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'
```
### 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 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;
}
```
## License
MIT