mobx-react-helper

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

npm i mobx react \
    mobx-react \
    mobx-react-helper

Configuration

tsconfig.json

Compatible with MobX 6/7:

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}

Observable Props, State & Context

source/index.tsx

import { createRoot } from 'react-dom/client';

import { MyComponent } from './Component';
import { session, MyContext } from './store';

createRoot(document.body).render(
    <MyContext.Provider value={session}>
        <MyComponent />
    </MyContext.Provider>
);

source/store.ts

import { createContext } from 'react';

export const session = { email: '[e-mail]' };

export const MyContext = createContext(session);

source/Component.tsx

import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { ObservedComponent } from 'mobx-react-helper';

import { session } from './store';

export type MyComponentProps = { prefix: string };

type State = { text: string };

@observer
export class MyComponent extends ObservedComponent<
    MyComponentProps,
    { email: string },
    State
> {
    state: Readonly<State> = { text: '' };

    @computed
    get decoratedText() {
        return (
            this.observedProps.prefix +
            this.observedState.text +
            this.observedContext.email
        );
    }

    render() {
        return <p>{this.decoratedText}</p>;
    }
}

Observable Reaction decorator

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { ObservedComponent, reaction } from 'mobx-react-helper';

@observer
export class MyComponent extends ObservedComponent {
    @observable
    accessor count = 0;

    componentDidMount() {
        super.componentDidMount();
        // Super method call is required if you have more "did mount" logic below
        // Your logic is here...
    }

    componentWillUnmount() {
        super.componentWillUnmount();
        // Super method call is required if you have more "will unmount" logic below
        // Your logic is here...
    }

    @reaction(({ count }) => count)
    handleCountChange(newValue: number, oldValue: number) {
        console.log(`Count changed from ${oldValue} to ${newValue}`);
    }

    render() {
        return (
            <button onClick={() => this.count++}>Up count {this.count}</button>
        );
    }
}

Abstract Form component

import { observer } from 'mobx-react';
import { FormComponent } from 'mobx-react-helper';

@observer
export class MyField extends FormComponent {
    render() {
        const { onChange, ...props } = this.props,
            { value, handleChange } = this;

        return (
            <>
                <input
                    {...props}
                    onChange={({ currentTarget: { value } }) =>
                        (this.innerValue = value)
                    }
                />
                <output>{value}</output>
            </>
        );
    }
}

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