https://github.com/houfeng/mota
🎡 An extremely lightweight and responsive state management library
https://github.com/houfeng/mota
observability observable react state-management
Last synced: about 1 year ago
JSON representation
🎡 An extremely lightweight and responsive state management library
- Host: GitHub
- URL: https://github.com/houfeng/mota
- Owner: Houfeng
- License: mit
- Created: 2017-03-03T04:55:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T04:13:41.000Z (over 2 years ago)
- Last Synced: 2025-04-03T02:37:57.090Z (about 1 year ago)
- Topics: observability, observable, react, state-management
- Language: TypeScript
- Homepage: http://houfeng.net/mota
- Size: 5.96 MB
- Stars: 181
- Watchers: 5
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](LICENSE.md)
[](https://www.npmjs.com/package/mota)
[](https://coveralls.io/github/Houfeng/mota?branch=master)
[](https://www.npmjs.com/package/mota)
# Overview
Mota is a "lightweight and responsive" state management library, which is less than 5KB. Developers can use it to write "almost framework independent pure js/ts business models", and then use Mota to simply let react components respond to model changes.
# Install
Install through NPM as follows
```sh
$ npm install mota --save
```
# Usage
**Example 1**: Hello Mota
```jsx
import { observable, observer } from "mota";
const model = observable({ count: 0 });
const add = ()=>model.count++;
const View1 = observer(() => {
return
{model.count};
});
const View2 = observer(() => {
return
{model.count}
click
;
});
```
**Example 2**: Using useObservable
```jsx
import { observer, useObservable } from "mota";
const View = observer(() => {
const model = useObservable({ count: 0 });
return
{model.count}
model.count++}>click
;
});
```
**Example 3**: Using useComputed
```jsx
import { observer, observable, useComputed } from "mota";
const user = observable({
firstName: 'Feng',
lastName: 'Hou'
});
const View = observer(() => {
// The fullName will be cached and responsive
const fullName = useComputed(()=>{
return `${user.firstName} ${user.lastName}`;
});
return
{fullName};
});
```
**Example 4**: Using useAutoRun
```jsx
import { observer, observable, useAutoRun } from "mota";
const model = observable({ count: 0 });
const View = observer(() => {
// When the count changes,
// it will be automatically re executed and printed 'count: n'
useAutoRun(()=>{
console.log('count:', model.count);
});
return
{model.count};
});
```
**Example 5**: Using useWatch
```jsx
import { observer, observable, useWatch } from "mota";
const model = observable({ count: 0 });
const View = observer(() => {
// When the result of the evaluation function changes,
// the processing function is re executed.
useWatch(()=>model.count%10, (oldValue, newValue)=>{
console.log(`old: ${oldValue}, new: ${newValue}`);
});
return
{model.count};
});
```
**Example 6**: Using in class components
```jsx
import { observer, observable, autorun, watch } from "mota";
const model = observable({ count: 0 });
@observer
class View extends React.Component {
add = ()=> model.count++;
componentDidMount(){
this.destroyAutoRun = autorun(()=>{
console.log('autorun count: ', model.count);
});
this.destroyWatch = watch(()=> model.count%10, ()=>{
console.log('autorun count: ', model.count);
});
}
componentWillUnmount(){
this.destroyAutoRun();
this.destroyWatch();
}
@computed get message(){
return `count: ${model.count}`;
}
render() {
return
{this.message}
click
;
}
}
```
**Example 7**: Using multiple instances in class components
```jsx
import { observer, observable, autorun, watch } from "mota";
@observable
class Model {
count = 0;
add () {
this.count++;
}
@computed get message(){
return `count: ${model.count}`;
}
}
@observer
class View extends React.Component {
model = new Model();
render() {
return
{this.model.message}
this.model.add()}>click
;
}
}
```