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

Validation Utilities

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

PropTypes validators specifically designed for MobX observable data types, ensuring proper validation while preventing unwanted tracking during the validation process.

Capabilities

Observable Array Validators

Validators for MobX observable arrays with optional type checking for array elements.

/**
 * Validates that prop is a MobX observable array
 */
const observableArray: React.Requireable<any>;

/**
 * Validates that prop is a MobX observable array with elements of specified type
 * @param typeChecker - Validator for array elements
 * @returns Validator for observable array of specified type
 */
function observableArrayOf(typeChecker: React.Validator<any>): React.Requireable<any>;

Usage Example:

import React from "react";
import { observer, PropTypes } from "mobx-react";
import PropTypesLib from "prop-types";

const TodoList = observer(({ todos, priorities }) => (
  <div>
    {todos.map(todo => <div key={todo.id}>{todo.title}</div>)}
  </div>
));

TodoList.propTypes = {
  todos: PropTypes.observableArray.isRequired,
  priorities: PropTypes.observableArrayOf(PropTypesLib.string)
};

Observable Object Validators

Validators for MobX observable objects.

/**
 * Validates that prop is a MobX observable object
 */
const observableObject: React.Requireable<any>;

Usage Example:

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

const UserProfile = observer(({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
));

UserProfile.propTypes = {
  user: PropTypes.observableObject.isRequired
};

Observable Map Validators

Validators for MobX observable maps.

/**
 * Validates that prop is a MobX observable map
 */
const observableMap: React.Requireable<any>;

Usage Example:

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

const KeyValueDisplay = observer(({ data }) => (
  <div>
    {Array.from(data.entries()).map(([key, value]) => (
      <div key={key}>{key}: {value}</div>
    ))}
  </div>
));

KeyValueDisplay.propTypes = {
  data: PropTypes.observableMap.isRequired
};

Flexible Array Validators

Validators that accept either native JavaScript arrays or MobX observable arrays.

/**
 * Validates that prop is either a native array or MobX observable array
 */
const arrayOrObservableArray: React.Requireable<any>;

/**
 * Validates that prop is either a native array or MobX observable array with elements of specified type
 * @param typeChecker - Validator for array elements
 * @returns Validator for native or observable array of specified type
 */
function arrayOrObservableArrayOf(typeChecker: React.Validator<any>): React.Requireable<any>;

Usage Example:

import React from "react";
import { observer, PropTypes } from "mobx-react";
import PropTypesLib from "prop-types";

const FlexibleList = observer(({ items, tags }) => (
  <div>
    {items.map((item, index) => (
      <div key={index}>{item}</div>
    ))}
  </div>
));

FlexibleList.propTypes = {
  items: PropTypes.arrayOrObservableArray.isRequired,
  tags: PropTypes.arrayOrObservableArrayOf(PropTypesLib.string)
};

Flexible Object Validators

Validators that accept either native JavaScript objects or MobX observable objects.

/**
 * Validates that prop is either a native object or MobX observable object
 */
const objectOrObservableObject: React.Requireable<any>;

Usage Example:

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

const ConfigDisplay = observer(({ config }) => (
  <div>
    {Object.entries(config).map(([key, value]) => (
      <div key={key}>{key}: {String(value)}</div>
    ))}
  </div>
));

ConfigDisplay.propTypes = {
  config: PropTypes.objectOrObservableObject.isRequired
};

Complete PropTypes Object

All validation utilities are available as properties of the exported PropTypes object.

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>;
};

Complete Usage Example:

import React from "react";
import { observer, PropTypes } from "mobx-react";
import PropTypesLib from "prop-types";

const ComplexComponent = observer(({
  todos,
  user,
  metadata,
  tags,
  settings,
  statistics
}) => (
  <div>
    <h1>{user.name}</h1>
    <p>{todos.length} todos</p>
    <div>Tags: {tags.join(", ")}</div>
    <pre>{JSON.stringify(settings, null, 2)}</pre>
  </div>
));

ComplexComponent.propTypes = {
  todos: PropTypes.observableArray.isRequired,
  user: PropTypes.observableObject.isRequired,
  metadata: PropTypes.observableMap.isRequired,
  tags: PropTypes.arrayOrObservableArrayOf(PropTypesLib.string).isRequired,
  settings: PropTypes.objectOrObservableObject,
  statistics: PropTypes.arrayOrObservableArray
};