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

Component Utilities

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

Essential utilities for React component manipulation, ref handling, and component introspection. These utilities help with component composition and ref management patterns.

Capabilities

Component Introspection

getDisplayName

Gets the display name of a React component for debugging and development tools.

/**
 * Gets display name of React component
 * @param Component - React component
 * @returns Display name string
 */
function getDisplayName(Component: React.ComponentType<any>): string;

Usage Example:

import { getDisplayName } from '@mui/utils';

function MyComponent() {
  return <div>Hello</div>;
}

const name = getDisplayName(MyComponent); // "MyComponent"
const buttonName = getDisplayName('button'); // "button"

isMuiElement

Checks if a React element is a MUI component by matching against provided component names.

/**
 * Checks if element is a MUI component
 * @param element - React element to check
 * @param muiNames - Array of MUI component names to match
 * @returns True if element matches any MUI name
 */
function unstable_isMuiElement(
  element: React.ReactElement, 
  muiNames: string[]
): boolean;

Children Utilities

getValidReactChildren

Filters React children to return only valid React elements, removing null, undefined, and invalid children.

/**
 * Filters and returns valid React children
 * @param children - React children to filter
 * @returns Array of valid React elements
 */
function getValidReactChildren(children: React.ReactNode): React.ReactElement[];

Usage Example:

import { getValidReactChildren } from '@mui/utils';

function MyComponent({ children }) {
  const validChildren = getValidReactChildren(children);
  
  return (
    <div>
      {validChildren.map((child, index) => 
        React.cloneElement(child, { key: index })
      )}
    </div>
  );
}

Ref Management

setRef

Sets a value on a React ref, handling both callback refs and mutable ref objects.

/**
 * Sets value on React ref
 * @param ref - React ref to set value on
 * @param value - Value to set
 */
function unstable_setRef<T>(
  ref: React.Ref<T> | undefined, 
  value: T | null
): void;

Usage Example:

import { unstable_setRef as setRef } from '@mui/utils';

function MyComponent({ inputRef }) {
  const internalRef = React.useRef<HTMLInputElement>(null);
  
  React.useEffect(() => {
    if (internalRef.current) {
      setRef(inputRef, internalRef.current);
    }
  }, [inputRef]);

  return <input ref={internalRef} />;
}

getReactElementRef

Extracts the ref from a React element.

/**
 * Extracts ref from React element
 * @param element - React element
 * @returns Ref from element or null
 */
function unstable_getReactElementRef(
  element: React.ReactElement
): React.Ref<any> | null;

getReactNodeRef

Extracts the ref from a React node (element or component).

/**
 * Extracts ref from React node
 * @param node - React node
 * @returns Ref from node or null
 */
function unstable_getReactNodeRef(
  node: React.ReactNode
): React.Ref<any> | null;