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

Store Management

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

Provider/inject pattern for sharing MobX stores across React component trees using React context, providing dependency injection capabilities.

Capabilities

Provider Component

Provides MobX stores to child components via React context.

/**
 * Provides MobX stores to child components via React context
 * @param props - Provider props containing stores and children
 * @returns JSX element that provides context
 */
function Provider(props: ProviderProps): JSX.Element;

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

type IValueMap = Record<string, any>;

Usage Example:

import React from "react";
import { Provider } from "mobx-react";
import { TodoStore } from "./stores/TodoStore";
import { UserStore } from "./stores/UserStore";

const todoStore = new TodoStore();
const userStore = new UserStore();

function App() {
  return (
    <Provider todoStore={todoStore} userStore={userStore}>
      <TodoApp />
    </Provider>
  );
}

MobX Provider Context

React context object for accessing MobX stores directly.

/**
 * React context for MobX stores
 */
const MobXProviderContext: React.Context<IValueMap>;

Usage Example:

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

function TodoList() {
  const stores = React.useContext(MobXProviderContext);
  const { todoStore } = stores;
  
  return (
    <div>
      {todoStore.todos.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  );
}

Inject Higher-Order Component

Injects stores from Provider context into component props with multiple signature options.

/**
 * Injects specific stores by name from Provider context
 * @param stores - Store names to inject as props
 * @returns Higher-order component that injects stores
 */
function inject(...stores: Array<string>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P> ? IWrappedComponent<P> : never);

/**
 * Injects stores using a custom mapping function
 * @param fn - Function that maps available stores to component props
 * @returns Higher-order component that injects mapped stores
 */
function inject<S extends IValueMap = {}, P extends IValueMap = {}, I extends IValueMap = {}, C extends IValueMap = {}>(
  fn: IStoresToProps<S, P, I, C>
): <T extends IReactComponent>(target: T) => T & IWrappedComponent<P>;

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

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

Usage Examples:

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

// Inject specific stores by name
const TodoList = inject("todoStore")(observer(({ todoStore }) => (
  <div>
    {todoStore.todos.map(todo => (
      <div key={todo.id}>{todo.title}</div>
    ))}
  </div>
)));

// Inject multiple stores
const Dashboard = inject("todoStore", "userStore")(observer(({ todoStore, userStore }) => (
  <div>
    <h1>Welcome {userStore.currentUser.name}</h1>
    <p>You have {todoStore.todos.length} todos</p>
  </div>
)));

// Custom store mapping
const TodoStats = inject((stores, props) => ({
  completedCount: stores.todoStore.completedTodos.length,
  totalCount: stores.todoStore.todos.length,
  userName: stores.userStore.currentUser.name
}))(observer(({ completedCount, totalCount, userName }) => (
  <div>
    {userName}: {completedCount}/{totalCount} completed
  </div>
)));

// Class component with decorator
@inject("todoStore")
@observer
class TodoManager extends React.Component {
  render() {
    const { todoStore } = this.props;
    return <div>{todoStore.todos.length} todos</div>;
  }
}

Types

type IValueMap = Record<string, any>;

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

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

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