Version v7.8.0 | Mantine

Start from version 1.14.4 postcss-preset-mantine supports autoRem option that can be used to automatically convert all px values to rem units in .css files.

This option works similar to rem function. The following code:

Will be transformed to:

Note that autoRem converts only CSS properties, values in @media queries are not converted automatically – you still need to use em function to convert them.

autoRem option does not convert values in the following cases:

If you want to convert above values to rem units, use rem function manually.

useForm hook now supports uncontrolled mode . Uncontrolled mode provides a significant performance improvement by reducing the number of re-renders and the amount of state updates almost to 0. Uncontrolled mode is now the recommended way to use the useForm hook for almost all use cases.

Example of uncontrolled form ( form.values are not updated):

With uncontrolled mode, you can not access form.values as a state variable, instead, you can use form.getValues() method to get current form values at any time:

form.getValues() always returns the latest form values, it is safe to use it after state updates:

form.watch is an effect function that allows subscribing to changes of a specific form field. It accepts field path and a callback function that is called with new value, previous value, touched and dirty field states:

You can now customize middlewares options in Popover component and in other components ( Menu , Select , Combobox , etc.) based on Popover.

To customize Floating UI middlewares options, pass them as an object to the middlewares prop. For example, to change shift middleware padding to 20px use the following configuration:

Duplicate scopes are not allowed

New use-debounced-callback hook:

New use-throttled-state hook:

New use-throttled-value hook:

New use-throttled-callback hook:

New use-orientation hook:

Type: landscape-primary

New use-is-first-render hook:

Is first render: Yes

Recommended articles