MobX React helper

MobX helper library for React component engine, with TypeScript Class & Decorator supports.

Versions

SemVer	status	ES decorator	MobX
>=0.4	✅developing	stage-3 (internal use)	>=6.11
0.3.x	❌deprecated	stage-3	>=6.11
<0.3	❌deprecated	stage-2	>=4 <6.11

Usage

Installation

1npm i mobx react \
2    mobx-react \
3    mobx-react-helper

Configuration

tsconfig.json

Compatible with MobX 6/7:

1{
2    "compilerOptions": {
3        "target": "ES6",
4        "moduleResolution": "Node",
5        "useDefineForClassFields": true,
6        "experimentalDecorators": false,
7        "jsx": "react-jsx"
8    }
9}

Observable Props, State & Context

source/index.tsx

1import { createRoot } from 'react-dom/client';
2
3import { MyComponent } from './Component';
4import { session, MyContext } from './store';
5
6createRoot(document.body).render(
7    <MyContext.Provider value={session}>
8        <MyComponent />
9    </MyContext.Provider>
10);

source/store.ts

1import { createContext } from 'react';
2
3export const session = { email: 'tech-query@idea2.app' };
4
5export const MyContext = createContext(session);

source/Component.tsx

1import { computed } from 'mobx';
2import { observer } from 'mobx-react';
3import { ObservedComponent } from 'mobx-react-helper';
4
5import { session } from './store';
6
7export type MyComponentProps = { prefix: string };
8
9type State = { text: string };
10
11@observer
12export class MyComponent extends ObservedComponent<
13    MyComponentProps,
14    { email: string },
15    State
16> {
17    state: Readonly<State> = { text: '' };
18
19    @computed
20    get decoratedText() {
21        return (
22            this.observedProps.prefix +
23            this.observedState.text +
24            this.observedContext.email
25        );
26    }
27
28    render() {
29        return <p>{this.decoratedText}</p>;
30    }
31}

Observable Reaction decorator

1import { observable } from 'mobx';
2import { observer } from 'mobx-react';
3import { ObservedComponent, reaction } from 'mobx-react-helper';
4
5@observer
6export class MyComponent extends ObservedComponent {
7    @observable
8    accessor count = 0;
9
10    componentDidMount() {
11        super.componentDidMount();
12        // Super method call is required if you have more "did mount" logic below
13        // Your logic is here...
14    }
15
16    componentWillUnmount() {
17        super.componentWillUnmount();
18        // Super method call is required if you have more "will unmount" logic below
19        // Your logic is here...
20    }
21
22    @reaction(({ count }) => count)
23    handleCountChange(newValue: number, oldValue: number) {
24        console.log(`Count changed from ${oldValue} to ${newValue}`);
25    }
26
27    render() {
28        return (
29            <button onClick={() => this.count++}>Up count {this.count}</button>
30        );
31    }
32}

Abstract Form component

1import { observer } from 'mobx-react';
2import { FormComponent } from 'mobx-react-helper';
3
4@observer
5export class MyField extends FormComponent {
6    render() {
7        const { onChange, ...props } = this.props,
8            { value, handleChange } = this;
9
10        return (
11            <>
12                <input
13                    {...props}
14                    onChange={({ currentTarget: { value } }) =>
15                        (this.innerValue = value)
16                    }
17                />
18                <output>{value}</output>
19            </>
20        );
21    }
22}

User case

1. Super Table & Form: https://github.com/idea2app/MobX-RESTful-table
2. React Bootstrap extra: https://github.com/idea2app/Idea-React
3. Open Street Map: https://github.com/idea2app/OpenReactMap