https://github.com/capaj/mobx-observer
a simple observer decorator you can utilize with any react-like components
https://github.com/capaj/mobx-observer
Last synced: about 1 year ago
JSON representation
a simple observer decorator you can utilize with any react-like components
- Host: GitHub
- URL: https://github.com/capaj/mobx-observer
- Owner: capaj
- License: mit
- Created: 2016-07-11T15:04:40.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-12T17:57:44.000Z (almost 10 years ago)
- Last Synced: 2024-10-04T20:12:50.538Z (almost 2 years ago)
- Language: JavaScript
- Size: 10.7 KB
- Stars: 13
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-mobx - mobx-observer
README
# mobx-observer
an observer decorator and factory for all your react-like components.
## Required methods
```
componentDidMount
componentWillUnmount
render
```
If your component has these lifecycle methods, mobx-observer will be able to subscribe/unsubscribe to changes on your mobx observables. Which means you can use this not only with react, but also with inferno, preact, react-lite.
For React, it is safer to use the official [mobx-react](https://github.com/mobxjs/mobx-react).
## Install
```
npm i mobx-observer -S
```
## Usage
### decorator
```javascript
import Component from 'inferno-component'
import {observer} from 'mobx-observer'
@observer
class Counter extends Component {
render() {
return (
{
state.val++
}}>
Counter is at: { state.val }
)
}
}
```
### stateless component style
```javascript
import Component from 'inferno-component'
import {makeObserver, setComponent} from './observer'
setComponent(Component) // you only need to do this once, not for every component
// if you forget to setComponent, you will get this error: Super expression must either be null or a function, not undefined
const Counter = makeObserver((props) => {
return (
{
state.val++
}}>
Header! {props.a}
Counter is at: { state.val }
)
})
```
## Performance
Mobx-observer should be on par with mobx-react.