or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

hooks-utilities.mdindex.mdreactivity.mdstore-management.mdvalidation.md
tile.json

tessl/npm-mobx-react

React bindings for MobX that enable the creation of fully reactive React components.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mobx-react@9.2.x

To install, run

npx @tessl/cli install tessl/npm-mobx-react@9.2.0

index.mddocs/

mobx-react

mobx-react provides React bindings for MobX that enable the creation of fully reactive React components. It offers the observer decorator/function that automatically tracks observable dependencies and re-renders components when observable data changes, supporting both functional and class-based components with React.memo automatically applied for functional components.

Package Information

  • Package Name: mobx-react
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install mobx-react

Core Imports

import { observer, Provider, inject } from "mobx-react";

For CommonJS:

const { observer, Provider, inject } = require("mobx-react");

Basic Usage

import React from "react";
import { observer } from "mobx-react";
import { observable, action } from "mobx";

// Create observable store
const counterStore = observable({
  count: 0,
  increment: action(function() {
    this.count++;
  })
});

// Create reactive component
const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={counterStore.increment}>Increment</button>
    </div>
  );
});

Architecture

mobx-react is built around several key components:

  • Observer Pattern: The observer function/decorator that makes components reactive to MobX observables
  • Context Integration: Provider/inject pattern for dependency injection (though React.createContext is now preferred)
  • Lifecycle Management: Automatic cleanup and disposal utilities for class components
  • Validation System: PropTypes validators specifically designed for MobX observable data
  • Batching System: Configurable batching behavior for optimal performance

Capabilities

Component Reactivity

Core observer functionality that makes React components automatically reactive to MobX observable changes. Works with both function and class components.

function observer<T extends IReactComponent>(component: T): T;
function observer<T extends IReactComponent>(component: T, context: ClassDecoratorContext): void;

type IReactComponent<P = any> =
  | React.ClassicComponentClass<P>
  | React.ComponentClass<P>
  | React.FunctionComponent<P>
  | React.ForwardRefExoticComponent<P>;

Component Reactivity

Store Management

Provider/inject pattern for sharing MobX stores across React component trees using React context.

function Provider(props: ProviderProps): JSX.Element;

interface ProviderProps extends IValueMap {
  children: React.ReactNode;
}

const MobXProviderContext: React.Context<IValueMap>;

function inject(...stores: Array<string>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never);
function inject<S, P, I, C>(fn: IStoresToProps<S, P, I, C>): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;

Store Management

Validation Utilities

PropTypes validators specifically designed for MobX observable data types with proper tracking prevention.

const PropTypes: {
  observableArray: React.Requireable<any>;
  observableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
  observableMap: React.Requireable<any>;
  observableObject: React.Requireable<any>;
  arrayOrObservableArray: React.Requireable<any>;
  arrayOrObservableArrayOf: (typeChecker: React.Validator<any>) => React.Requireable<any>;
  objectOrObservableObject: React.Requireable<any>;
};

Validation Utilities

Hooks and Utilities

Modern React hooks and utilities from mobx-react-lite, plus legacy lifecycle management.

function useLocalObservable<T>(initializer: () => T): T;
function useAsObservableSource<T>(source: T): T;
function Observer({ children }: { children: () => React.ReactNode }): JSX.Element;
function enableStaticRendering(enable: boolean): void;
function isUsingStaticRendering(): boolean;
function isObserverBatched(): boolean;
function observerBatching(batchFunction: (callback: () => void) => void): void;
function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void;
function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(target: React.Component<any, any>, fn: TF): TF;

type Disposer = () => void;

Hooks and Utilities

Types

type IValueMap = Record<string, any>;

type IReactComponent<P = any> =
  | React.ClassicComponentClass<P>
  | React.ComponentClass<P>
  | React.FunctionComponent<P>
  | React.ForwardRefExoticComponent<P>;

interface IWrappedComponent<P> {
  wrappedComponent: IReactComponent<P>;
}

interface ProviderProps extends IValueMap {
  children: React.ReactNode;
}

type IStoresToProps<
  S extends IValueMap = {},
  P extends IValueMap = {},
  I extends IValueMap = {},
  C extends IValueMap = {}
> = (stores: S, nextProps: P, context?: C) => I;