mantinedev/mantine 2.1.0 on GitHub

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