CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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);
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/utils@7.3.x
Publish Source
CLI
Badge
tessl/npm-mui--utils badge