You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

mobx-react-helper

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobx-react-helper

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

0.5.1
latest
Source
npmnpm
Version published
Weekly downloads
21
-57.14%
Maintainers
1
Weekly downloads
 
Created
Source

MobX React helper

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

MobX compatibility NPM Dependency CI & CD

NPM

Versions

SemVerstatusES decoratorMobX
>=0.4✅developingstage-3 (internal use)>=6.11
0.3.x❌deprecatedstage-3>=6.11
<0.3❌deprecatedstage-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: 'tech-query@idea2.app' };

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

Keywords

mobx

FAQs

Package last updated on 05 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts