Version 5.9.0

Release date

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.

EyeDropper API is not supported in your browser
import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons';
import { useEyeDropper } from '@mantine/hooks';
function Demo() {
const [color, setColor] = useState('');
const [error, setError] = useState(null);
const { supported, open } = useEyeDropper();
const pickColor = async () => {
try {
const { sRGBHex } = await open();
setColor(sRGBHex);
} catch (e) {
setError(e);
}
};
if (!supported) {
return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
}
return (
<Group>
<ActionIcon variant="default" onClick={pickColor}>
<IconColorPicker size={16} stroke={1.5} />
</ActionIcon>
{color ? (
<Group spacing="xs">
<ColorSwatch color={color} />
<Text>Picked color: {color}</Text>
</Group>
) : (
<Text>Click the button to pick color</Text>
)}
{error && <Text color="red">Error: {error?.message}</Text>}
</Group>
);
}

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.

import { ColorInput } from '@mantine/core';
function Demo() {
return (
<ColorInput
withEyeDropper
placeholder="With eye dropper"
label="Pick any color from the page"
/>
);
}

AppShell alt layout

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

Open alt layout example in new tab

Responsive Grid gutter

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

1
2
3
import { Grid } from '@mantine/core';
function Demo() {
return (
<Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
<Grid.Col span={4}>1</Grid.Col>
<Grid.Col span={4}>2</Grid.Col>
<Grid.Col span={4}>3</Grid.Col>
</Grid>
);
}

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:

import { Input } from '@mantine/core';
function Demo() {
return (
<Input component="button">
<Input.Placeholder>Placeholder content</Input.Placeholder>
</Input>
);
}

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