What is @mui/utils?
The @mui/utils package provides a collection of utility functions designed to aid in the development of UI components and applications. These utilities cover a range of functionalities such as deep object manipulation, event handling, and system property helpers, making it easier to implement common tasks in a more efficient and standardized way.
What are @mui/utils's main functionalities?
Deep object manipulation
Allows for the deep merging of two objects, useful for combining default and user-provided configurations.
import { deepmerge } from '@mui/utils';
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = deepmerge(obj1, obj2);
// Result: { a: 1, b: 3, c: 4 }
Event handling
Facilitates getting the owner document of a node, which is helpful for correctly attaching event listeners in a document-agnostic way.
import { ownerDocument } from '@mui/utils';
const doc = ownerDocument(node);
// Use doc to add or remove event listeners
System property helpers
Provides an enhanced effect hook that uses `useLayoutEffect` on the server to avoid warnings and `useEffect` on the client.
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
useEnhancedEffect(() => {
// Effect logic here
}, [deps]);
Other packages similar to @mui/utils
lodash
Lodash is a comprehensive utility library offering a wide range of functions for tasks such as object manipulation, array handling, and function utilities. It is more general-purpose compared to @mui/utils, which is more focused on UI development needs.
ramda
Ramda is a functional programming utility library that emphasizes a more functional programming approach. It provides utilities for working with functions, arrays, and objects in a functional manner. Ramda's approach is more about composing functions and immutable data handling, which contrasts with @mui/utils' focus on UI-specific utilities.
@mui/codemod@6.0.0-alpha.6
- <!-- 18 -->[Divider] Only apply codemod if light prop is present (#42098) @DiegoAndai
Docs
- <!-- 13 -->Fix 301 to Figma @oliviertassinari
- <!-- 12 -->Fix use of deprecated React API (#42118) @oliviertassinari
- <!-- 11 -->Remove the Base notification (#42191) @danilo-leal
- <!-- 07 -->[material-ui] Improve descriptions for deprecated props (#42221) @aarongarciah
- <!-- 06 -->[material-ui] Fix typo in composition docs (#42195) @aarongarciah
Core
- <!-- 20 -->[blog] Introducing Pigment CSS blog post (#42198) @samuelsycamore
- <!-- 17 -->[core] Remove confusing comment @oliviertassinari
- <!-- 16 -->[core] Match other repositories and convention @oliviertassinari
- <!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI
Autocomplete
component (#42099) @heath-freenome - <!-- 14 -->[core] Remove unecessary quotes @oliviertassinari
- <!-- 10 -->[docs-infra] Share code for section title (#42236) @alexfauquette
- <!-- 09 -->[docs-infra] Limit the copy button to the visible code block (#42115) @danilo-leal
- <!-- 08 -->[docs-infra] Make select components with two capital letters (#42004) @alexfauquette
- <!-- 08 -->[docs-infra][toolpad] Fix Page title and SERP title mismatch (#41919) @bharatkashyap
- <!-- 05 -->[website] Add redirection for talk @oliviertassinari
- <!-- 04 -->[website] Adds Arthur Balduini team info (#42193) @arthurbalduini
- <!-- 03 -->[website] Update the role template file (#42192) @danilo-leal
- <!-- 02 -->[website] Update MUI X deps and migrate TreeView demos to v7 API (#42149) @noraleonte
- <!-- 01 -->[website] Fix pricing casing (#42178) @aarongarciah
All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput