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

$ npm install mota --save

Usage

Example 1: Hello Mota

import { observable, observer } from "mota";

const model = observable({ count: 0 });
const add = ()=>model.count++;

const View1 = observer(() => {
  return <div>{model.count}</div>;
});

const View2 = observer(() => {
  return <div>
    <span>{model.count}</span>
    <button onClick={add}>click<button>
  </div>;
});

Example 2: Using useObservable

import { observer, useObservable } from "mota";

const View = observer(() => {
  const model = useObservable({ count: 0 });
  return <div>
    <span>{model.count}</span>
    <button onClick={()=>model.count++}>click<button>
  </div>;
});

Example 3: Using useComputed

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 <div>{fullName}</div>;
});

Example 4: Using useAutoRun

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 <div>{model.count}</div>;
});

Example 5: Using useWatch

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 <div>{model.count}</div>;
});

Example 6: Using in class components

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 <div>
      <span>{this.message}</span>
      <button onClick={this.add}>click<button>
    </div>;
  }
}

Example 7: Using multiple instances in class components

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 <div>
      <span>{this.model.message}</span>
      <button onClick={()=>this.model.add()}>click<button>
    </div>;
  }
}