5-9-0.mdx

group	title	order	slug	release	date
changelog	Version 5.9.0	1	/changelog/5-9-0/	https://github.com/mantinedev/mantine/releases/tag/5.9.0	December 1st, 2022

import { Anchor } from '@mantine/core'; import { HooksDemos, ColorInputDemos } from '@mantine/demos';

use-eye-dropper hook

New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

ColorInput eye dropper

ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

AppShell alt layout

AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

<Anchor href="/app-shell-demo-alt/" target="_blank" mb="xl" style={{ display: 'block' }}> Open alt layout example in new tab

Responsive Grid gutter

Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

Static components default props

All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

import { MantineProvider, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          MenuItem: {
            defaultProps: { color: 'red' },
          },

          TabsList: {
            defaultProps: {
              position: 'right',
            },
          },

          RichTextEditorToolbar: {
            defaultProps: {
              sticky: true,
              stickyOffset: 60,
            },
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

Input.Placeholder component

Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

Other changes

• RangeSlider component now supports maxRange prop
• Stepper component now supports any CSS color value in color prop
• use-hotkeys hook now allows to configure whether default behavior should be prevented
• Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props