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

Configuration

tsconfig.json

Compatible with MobX 6/7:

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

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>;
    }
}

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