tessl/npm-mui--utils

Utility functions for React components providing hooks, PropType validators, DOM utilities, and component helpers.

—

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

PropType Validators

Name: tessl/npm-mui--utils
Author: tessl

Development-time validation utilities for React component props, providing enhanced debugging and type checking in development mode. These validators help catch common errors and improve developer experience.

Capabilities

Basic Validators

HTMLElementType

PropType validator for HTML element types (e.g., 'div', 'span', 'button').

/**
 * PropType validator for HTML element types
 */
const HTMLElementType: React.Validator<any>;

Usage Example:

import { HTMLElementType } from '@mui/utils';
import PropTypes from 'prop-types';

MyComponent.propTypes = {
  component: HTMLElementType
};

elementAcceptingRef

PropType validator for elements that can accept a ref.

/**
 * PropType validator for elements that accept refs
 */
const elementAcceptingRef: React.Validator<any>;

elementTypeAcceptingRef

PropType validator for element types (components) that can accept a ref.

/**
 * PropType validator for element types that accept refs
 */
const elementTypeAcceptingRef: React.Validator<any>;

refType

PropType validator for React refs.

/**
 * PropType validator for React refs
 */
const refType: React.Validator<any>;

integerPropType

PropType validator for integer values.

/**
 * PropType validator for integer values
 */
const integerPropType: React.Validator<any>;

Composite Validators

chainPropTypes

Chains multiple PropType validators together, allowing multiple validation rules for a single prop.

/**
 * Chains multiple PropType validators together
 * @param validator - First validator
 * @param validators - Additional validators to chain
 * @returns Combined validator function
 */
function chainPropTypes(
  validator: React.Validator<any>,
  ...validators: React.Validator<any>[]
): React.Validator<any>;

Usage Example:

import { chainPropTypes, integerPropType } from '@mui/utils';
import PropTypes from 'prop-types';

const positiveIntegerPropType = chainPropTypes(
  integerPropType,
  (props, propName, componentName) => {
    if (props[propName] < 0) {
      return new Error(`Invalid prop \`${propName}\` of value \`${props[propName]}\` supplied to \`${componentName}\`, expected a positive integer.`);
    }
    return null;
  }
);

MyComponent.propTypes = {
  count: positiveIntegerPropType
};

exactProp

Ensures only specified props are passed to a component (development only).

/**
 * Ensures only specified props are passed (development only)
 * @param propTypes - Object of allowed PropTypes
 * @returns Enhanced PropTypes object with exact validation
 */
function exactProp(propTypes: Record<string, any>): Record<string, any>;

Usage Example:

import { exactProp } from '@mui/utils';
import PropTypes from 'prop-types';

MyComponent.propTypes = exactProp({
  children: PropTypes.node,
  className: PropTypes.string,
  color: PropTypes.oneOf(['primary', 'secondary'])
});

Development Utilities

deprecatedPropType

Wraps a PropType validator with a deprecation warning.

/**
 * Wraps PropType validator with deprecation warning
 * @param validator - Original validator
 * @param reason - Deprecation reason message
 * @returns Validator with deprecation warning
 */
function unstable_deprecatedPropType(
  validator: React.Validator<any>, 
  reason: string
): React.Validator<any>;

Usage Example:

import { unstable_deprecatedPropType as deprecatedPropType } from '@mui/utils';
import PropTypes from 'prop-types';

MyComponent.propTypes = {
  oldProp: deprecatedPropType(
    PropTypes.string,
    'The oldProp is deprecated. Use newProp instead.'
  ),
  newProp: PropTypes.string
};

unsupportedProp

Creates a validator that always throws an error for unsupported props.

/**
 * Creates validator that throws error for unsupported props
 * @param props - Props object
 * @param propName - Name of the prop
 * @param componentName - Name of the component
 * @param location - Prop location
 * @param propFullName - Full prop name
 * @returns Error for unsupported prop
 */
function unstable_unsupportedProp(
  props: any,
  propName: string,
  componentName: string,
  location: string,
  propFullName: string
): Error;

Factory Functions

requirePropFactory

Creates a PropType validator that requires a specific prop when certain conditions are met.

/**
 * Creates PropType validator that requires specific prop
 * @param componentNameInError - Component name for error messages
 * @param Component - Optional component reference
 * @returns Validator function for required prop
 */
function unstable_requirePropFactory(
  componentNameInError: string,
  Component?: React.ComponentType<any>
): (props: any, propName: string) => Error | null;

Usage Example:

import { unstable_requirePropFactory as requirePropFactory } from '@mui/utils';

const requireVariant = requirePropFactory('MyButton');

MyButton.propTypes = {
  variant: requireVariant,
  children: PropTypes.node
};