tessl/npm-mobx-react

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Component Reactivity

Name: tessl/npm-mobx-react
Author: tessl

Core observer functionality that makes React components automatically reactive to MobX observable changes, supporting both functional and class-based components.

Capabilities

Observer Function/Decorator

Makes React components reactive to MobX observables with automatic tracking and re-rendering.

/**
 * Makes React components reactive to MobX observables
 * @param component - React component to make reactive
 * @param context - Optional decorator context for TypeScript decorators
 * @returns Wrapped reactive component
 */
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>;

Usage Examples:

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

// Functional component
const TodoItem = observer(({ todo }) => (
  <div>
    <span>{todo.title}</span>
    <input
      type="checkbox"
      checked={todo.completed}
      onChange={() => todo.toggle()}
    />
  </div>
));

// Class component
@observer
class TodoList extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <div>
        {store.todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </div>
    );
  }
}

// Class component without decorator
const TodoList = observer(class extends React.Component {
  render() {
    // Component implementation
  }
});

Observer Component

Component wrapper for creating reactive regions without wrapping the entire component.

/**
 * Component wrapper for reactive regions
 * @param children - Function that returns JSX to be made reactive
 * @returns Reactive JSX element
 */
function Observer({ children }: { children: () => React.ReactNode }): JSX.Element;

Usage Example:

import React from "react";
import { Observer } from "mobx-react";

function App({ store }) {
  return (
    <div>
      <h1>My App</h1>
      <Observer>
        {() => (
          <p>Count: {store.count}</p>
        )}
      </Observer>
      <button onClick={() => store.increment()}>
        Increment
      </button>
    </div>
  );
}

Use Observer Hook (Deprecated)

Hook for creating reactive computations within functional components.

/**
 * @deprecated Use <Observer>{fn}</Observer> or wrap entire component in observer
 * Creates a reactive computation within a functional component
 * @param fn - Function to make reactive
 * @param baseComponentName - Name for debugging purposes
 * @returns Result of the reactive computation
 */
function useObserver<T>(fn: () => T, baseComponentName?: string): T;

Usage Example:

import React from "react";
import { useObserver } from "mobx-react";

function TodoCount({ store }) {
  return useObserver(() => (
    <span>Total: {store.todos.length}</span>
  ));
}

Types

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