or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-utilities.mdcss-utilities.mddom-utilities.mdindex.mdobject-function-utilities.mdproptype-validators.mdreact-hooks.mdslot-props-utilities.mdstring-utilities.md
tile.json

tessl/npm-mui--utils

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/utils@7.3.x

To install, run

npx @tessl/cli install tessl/npm-mui--utils@7.3.0

index.mddocs/

MUI Utils

MUI Utils is a comprehensive TypeScript utility library providing 53+ functions specifically designed for React component development. It serves as the foundational utility layer for the Material-UI (MUI) ecosystem and can be used independently in any React application requiring robust utility functions.

Package Information

  • Package Name: @mui/utils
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @mui/utils

Core Imports

import { 
  deepmerge, 
  useControlled, 
  generateUtilityClass,
  clamp,
  setRef 
} from '@mui/utils';

For CommonJS:

const { 
  deepmerge, 
  useControlled, 
  generateUtilityClass,
  clamp,
  setRef 
} = require('@mui/utils');

Basic Usage

import { 
  deepmerge, 
  unstable_useEventCallback as useEventCallback,
  unstable_generateUtilityClass as generateUtilityClass,
  clamp 
} from '@mui/utils';

// Deep merge objects with React element handling
const merged = deepmerge(
  { styles: { color: 'blue' }, props: { disabled: true } },
  { styles: { fontSize: 16 }, props: { variant: 'contained' } }
);

// Stable event callback hook
const handleClick = useEventCallback((event) => {
  console.log('Button clicked:', event.target);
});

// Generate CSS utility class names
const buttonClass = generateUtilityClass('MuiButton', 'root');
// Result: 'MuiButton-root'

// Clamp numeric values
const boundedValue = clamp(150, 0, 100); // Result: 100

Architecture

MUI Utils is organized around several key architectural patterns:

  • Individual Exports: Each utility is independently importable for optimal tree-shaking
  • TypeScript-First: Complete type safety with generic type preservation
  • React-Optimized: Utilities designed specifically for React patterns and lifecycle
  • Stability Levels: APIs marked as unstable_ are stable in implementation but may change in future versions
  • Cross-Environment: Many utilities handle both client-side and server-side rendering
  • PropType Integration: Comprehensive development-time validation utilities

Capabilities

React Hooks

Modern React hooks for component state management, lifecycle handling, and performance optimization. Essential for building custom components with proper React patterns.

function unstable_useControlled<T>(
  props: UseControlledProps<T>
): [T, React.Dispatch<React.SetStateAction<T | undefined>>];

function unstable_useEventCallback<Args, Return>(
  fn: (...args: Args[]) => Return
): (...args: Args[]) => Return;

function unstable_useForkRef<Instance>(
  ...refs: Array<React.Ref<Instance> | undefined>
): React.RefCallback<Instance> | null;

React Hooks

PropType Validators

Development-time validation utilities for React component props, providing enhanced debugging and type checking in development mode.

function chainPropTypes(
  validator: React.Validator<any>, 
  ...validators: React.Validator<any>[]
): React.Validator<any>;

function exactProp(propTypes: Record<string, any>): Record<string, any>;

const HTMLElementType: React.Validator<any>;
const elementAcceptingRef: React.Validator<any>;
const refType: React.Validator<any>;

PropType Validators

Component Utilities

Essential utilities for React component manipulation, ref handling, and component introspection.

function getDisplayName(Component: React.ComponentType<any>): string;

function getValidReactChildren(children: React.ReactNode): React.ReactElement[];

function unstable_setRef<T>(
  ref: React.Ref<T> | undefined, 
  value: T | null
): void;

function unstable_getReactElementRef(
  element: React.ReactElement
): React.Ref<any> | null;

Component Utilities

Object and Function Utilities

General-purpose utilities for object manipulation, function composition, and data processing.

function deepmerge<T>(
  target: T, 
  source: unknown, 
  options?: DeepmergeOptions
): T;

function clamp(value: number, min: number, max: number): number;

function unstable_debounce<T extends (...args: any[]) => any>(
  func: T, 
  wait?: number, 
  options?: DebounceOptions
): T & { clear: () => void; flush: () => void };

Object and Function Utilities

CSS Class and Style Utilities

Utilities for CSS class name generation, composition, and styling management in component libraries.

function unstable_generateUtilityClass(
  componentName: string, 
  slot: string, 
  globalStatePrefix?: string
): string;

function unstable_composeClasses<SlotKey extends string>(
  slots: Record<SlotKey, string | false | null | undefined>,
  getUtilityClass: (slot: SlotKey) => string,
  classes?: Partial<Record<SlotKey, string>>
): Record<SlotKey, string>;

const visuallyHidden: React.CSSProperties;

CSS Class and Style Utilities

DOM Utilities

Browser and DOM manipulation utilities for cross-platform React applications.

function unstable_ownerDocument(node?: Node | null): Document;

function unstable_ownerWindow(node?: Node | null): Window;

function unstable_getScrollbarSize(doc?: Document): number;

function unstable_isFocusVisible(element: Element): boolean;

DOM Utilities

String and Text Utilities

Text manipulation and formatting utilities for user interface content.

function unstable_capitalize(string: string): string;

function formatMuiErrorMessage(code: number, ...args: any[]): string;

String and Text Utilities

Slot and Props Utilities

Advanced prop management utilities for component slot patterns and dynamic prop resolution.

function unstable_useSlotProps<TSlotComponent, TSlotState, TSlotOwnerState>(
  parameters: UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState>
): UseSlotPropsResult<TSlotComponent>;

Slot and Props Utilities

Types

interface UseControlledProps<T = unknown> {
  controlled: T | undefined;
  default: T | undefined;
  name: string;
  state?: string;
}

interface DeepmergeOptions {
  clone?: boolean;
}

type EventHandlers = Record<string, React.EventHandler<any>>;

type WithOptionalOwnerState<Props extends { ownerState: unknown }> = Omit<
  Props,
  'ownerState'
> & Partial<Pick<Props, 'ownerState'>>;

type SlotComponentProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> =
  | (Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides)
  | ((ownerState: TOwnerState) => Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides);