MobX React helper

MobX React helper

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

MobX compatibility NPM Dependency CI & CD

NPM

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

Generated using TypeDoc