What is @material-ui/utils?
The @material-ui/utils package provides a collection of utility functions and helpers designed for use with Material-UI, a popular React UI framework. These utilities help with common tasks in application development such as event handling, component styling, and theme customization.
What are @material-ui/utils's main functionalities?
useControlled
This utility helps manage the state of controlled and uncontrolled components, making it easier to implement components that can operate in both modes.
import { useControlled } from '@material-ui/utils';
const [value, setValue] = useControlled({
controlled: controlledProp,
default: defaultValue,
});
useEventCallback
Ensures the stability of event handlers across re-renders, which can be particularly useful in components that rely on stable references to functions.
import { useEventCallback } from '@material-ui/utils';
const handleClick = useEventCallback((event) => {
// handle the event
});
getScrollbarSize
This function calculates the size of the scrollbar on the page, which can be useful for adjusting layout or compensating for scrollbars in overflow scenarios.
import { getScrollbarSize } from '@material-ui/utils';
const scrollbarWidth = getScrollbarSize();
Other packages similar to @material-ui/utils
lodash
Lodash is a comprehensive utility library offering a wide range of functions for tasks like array manipulation, object handling, and function utilities. While it covers a broader scope than @material-ui/utils, it doesn't provide utilities specifically tailored for UI development or integration with Material-UI.
recompose
Recompose provides a toolkit for building higher-order components in React. It offers utilities for component logic and state management, similar to some of the functionality in @material-ui/utils. However, Recompose focuses more on the component pattern and less on the specific needs of Material-UI.
@mui/joy@5.0.0-beta.1
- <!-- 06 -->[joy-ui][MenuButton] Fix disable of
MenuButton
(#38342) @sai6855
Docs
-
<!-- 33 -->[docs][AppBar] Fix ResponsiveAppBar
demo logo href (#38346) @iownthegame
-
<!-- 30 -->[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib
-
<!-- 29 -->[docs][Menu][base] Remove Unstyled
prefix from demos' function names (#38270) @sai6855
-
<!-- 22 -->[docs] Add themeable component guide (#37908) @siriwatknp
-
<!-- 21 -->[docs] Fix Joy UI demo background color (#38307) @oliviertassinari
-
<!-- 20 -->[docs] Update API docs for Number Input component (#38301) @ZeeshanTamboli
-
<!-- 14 -->[docs][joy-ui] Revise the theme typography page (#38285) @danilo-leal
-
<!-- 13 -->[docs][joy-ui] Add TS demo for Menu Bar (#38308) @sai6855
-
<!-- 10 -->[docs][joy-ui] Updated Typography callout at getting started (#38289) @zanivan
-
<!-- 12 -->[docs][joy-ui] Fix the Inter font installation instructions (#38284) @danilo-leal
-
<!-- 11 -->[docs][material] Add note to Autocomplete about ref forwarding (#38305) @samuelsycamore
-
<!-- 05 -->[docs][Skeleton] Make the demos feel more realistic (#38212) @oliviertassinari
-
<!-- 08 -->[examples] Swap Next.js examples between App Router and Pages Router; update naming convention (#38204) @samuelsycamore
-
<!-- 07 -->[examples][material-ui] Add Material UI + Next.js (App Router) example in JS (#38323) @samuelsycamore
-
<!-- 27 -->[blog] Discord announcement blog (#38258) @richbustos
-
<!-- 26 -->[blog] Fix 301 links to Toolpad @oliviertassinari
-
<!-- 04 -->[website] Updating Charts demo with real charts usage for MUI X marketing page (#38317) @richbustos
-
<!-- 03 -->[website] Adjust styles of the Product section on the homepage (#38366) @danilo-leal
-
<!-- 02 -->[website] Add Nora teamMember card to 'About' (#38358) @noraleonte
-
<!-- 01 -->[website] Fix image layout shift (#38326) @oliviertassinari
Core
- <!-- 24 -->[core] Fix docs demo export function consistency (#38191) @oliviertassinari
- <!-- 23 -->[core] Fix the link-check script on Windows (#38276) @michaldudak
- <!-- 26 -->[core] Use @testing-library/user-event direct API (#38325) @mj12albert
- <!-- 29 -->[core] Port GitHub workflow for ensuring triage label is present (#38312) @DanailH
- <!-- 19 -->[docs-infra] Consider files ending with .types.ts as props files (#37533) @mnajdova
- <!-- 18 -->[docs-infra] Fix skip to content design (#38304) @oliviertassinari
- <!-- 17 -->[docs-infra] Add a general round of polish to the API content display (#38282) @danilo-leal
- <!-- 16 -->[docs-infra] Make the side nav collapse animation snappier (#38259) @danilo-leal
- <!-- 15 -->[docs-infra] New Component API design followup (#38183) @cherniavskii
- <!-- 06 -->[test] Remove unnecessary
async
keyword from test (#38373) @ZeeshanTamboli
All contributors of this release in alphabetical order: @alisasanib, @cherniavskii, @DanailH, @danilo-leal, @iownthegame, @michaldudak, @mj12albert, @mnajdova, @noraleonte, @oliviertassinari, @richbustos, @sai6855, @samuelsycamore, @siriwatknp, @VishruthR, @yash-thakur, @zanivan, @ZeeshanTamboli