Mantine 2.1.0 is out

                July 20, 2021

            Mantine 2.1.0 is out

            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: &#39;scroll&#39;, 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
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

Don't miss what's next. Subscribe to Mantine monthly: