This release is almost fully built by Mantine community, lots of thanks for these awesome people who contributed these features!
use-hotkeys hook
Built by @steschwa
use-hotkeys hook allows you to subscribe to multiple hotkeys with single hook (document element) or function (any other element)
import { useHotkeys } from '@mantine/hooks';
function Demo() {
// ctrl + J and ⌘ + J to toggle color scheme
// ctrl + K and ⌘ + K to search
useHotkeys([
['mod+J', () => toggleColorScheme()],
['ctrl+K', () => search()],
['alt+mod+shift+X', () => rickRoll()],
]);
return null;
}
use-intersection
Built by @kosciolek
use-intersection hook allows you to get information about intersection of given element with its scroll container or document.body
import { useIntersection } from '@mantine/hooks';
import { Paper, Text, useMantineTheme } from '@mantine/core';
function Demo() {
const containerRef = useRef();
const theme = useMantineTheme();
const [ref, observer] = useIntersection({
root: containerRef.current,
threshold: 1,
});
return (
<Paper elementRef={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
<div style={{ paddingTop: 260, paddingBottom: 280 }}>
<Paper
elementRef={ref}
padding="xl"
style={{
backgroundColor: observer?.isIntersecting ? theme.colors.green[9] : theme.colors.red[9],
minWidth: '50%',
}}
>
<Text style={{ color: theme.white }} weight={700}>
{observer?.isIntersecting ? 'Fully visible' : 'Obscured'}
</Text>
</Paper>
</div>
</Paper>
);
}
use-hash
Built by @ghana7989
Get and set hash in url with use-hash hook:
import { useHash, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';
export function Demo() {
const [hash, setHash] = useHash();
return <Button onClick={() => setHash(randomId())}>Set hash to random string</Button>
}
Highlight component multiple substrings support
Built by @yoroshikun
Highlight component now supports:
- multiple substrings highlight
- highlighting of the same string multiple times
// Highlight all 3 "this" substrings
<Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>
// Highlights both "this" and "that" substrings
<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>
Tabs vertical orientation
Built by @wyze
Tabs component now supports vertical orientation:
Other changes and bug fixes
- Documentation now has search for quick props filters (built by @ghana7989)
- Input and all other components that use it (Select, Textarea, TextInput, Autocomplete, etc.) now supports headless variant without Mantine styles to help you create your own custom input styles with Styles API
- Checkbox component now supports animations
- Fixed bug in Select and Autocomplete components which made focus to shift to body element when inputs were blurred
- Fixed incorrect Slider marks background color