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