MobX React helper

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

Versions

SemVer	status	ES decorator	MobX
>=0.3.0	✅developing	stage-3	>=6.11
<0.3.0	❌deprecated	stage-2	>=4 <6.11

Usage

Installation

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

Configuration

tsconfig.json

Compatible with MobX 6/7:

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

Observable Props & State

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

export interface MyComponentProps {
    prefix: string;
}

interface State {
    text: string;
}

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

    declare observedProps: MyComponentProps;
    declare observedState: State;

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

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

Abstract Form component

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

@observer
@observePropsState
export class MyField extends FormComponent {
    handleChange = ({
        currentTarget: { value }
    }: ChangeEvent<HTMLInputElement>) => {
        this.innerValue = value;

        this.props.onChange?.(this.innerValue);
    };

    render() {
        const { onChange, ...props } = this.props,
            { value, handleChange } = this;

        return (
            <>
                <input {...props} onChange={handleChange} />

                <output>{value}</output>
            </>
        );
    }
}
Copy