Mantine

https://mantine.dev/get-started/
Admin
Mantine is a fully featured React components library with 120+ customizable components and 70+ hooks...
Tokens:2,580
Snippets:23
Trust Score:9.2
Update:8 months ago
Show doc for...
Tokens:
Raw
### Bind keyboard shortcuts with use-hotkeys in React

Source: https://mantine.dev/get-started/index

The use-hotkeys hook from Mantine enables binding keyboard shortcuts to specific actions within a React application. It accepts an array of key combinations and their corresponding callback functions. This example demonstrates opening a spotlight search with 'mod + K' and toggling the color scheme with 'mod + J'. It requires Mantine's spotlight and useMantineColorScheme hooks.

```jsx
import { useHotkeys } from '@mantine/hooks';
import { spotlight } from '@mantine/spotlight';
import { useMantineColorScheme } from '@mantine/core';
import { Shortcut } from './Shortcut';

function Demo() {
  const { toggleColorScheme } = useMantineColorScheme();

  useHotkeys([
    ['mod + K', () => spotlight.open()],
    ['mod + J', () => toggleColorScheme()],
    ['mod + shift + alt + X', () => secret()],
  ]);

  return (
    <>
      <Shortcut symbol="K" description="Open search" />
      <Shortcut symbol="J" description="Toggle color scheme" />
    </>
  );
}
```

--------------------------------

### Use EyeDropper Hook for Color Picking in React

Source: https://mantine.dev/get-started/index

Demonstrates how to use the useEyeDropper hook from @mantine/hooks to allow users to pick colors from anywhere on the screen. It handles browser support, color selection, and error handling.

```typescript
import { useState } from 'react';
import { ActionIcon, Group, ColorSwatch, Text } from '@mantine/core';
import { IconColorPicker } from '@tabler/icons-react';
import { useEyeDropper } from '@mantine/hooks';

function Demo() {
  const [color, setColor] = useState('');
  const [error, setError] = useState<Error | null>(null);
  const { supported, open } = useEyeDropper();

  const pickColor = async () => {
    try {
      const { sRGBHex } = (await open())!;
      setColor(sRGBHex);
    } catch (e) {
      setError(e as Error);
    }
  };

  if (!supported) {
    return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
  }

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor} size="xl" radius="md">
        <IconViewfinder size={28} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group gap="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      <bos>{error && <Text c="red">Error: {error?.message}</Text>}
    </Group>
  );
}

```

--------------------------------

### Enable Dark Color Scheme in Mantine Application

Source: https://mantine.dev/get-started/index

Illustrates how to enable the dark color scheme for a Mantine application by wrapping the root component with MantineProvider and setting the defaultColorScheme prop to 'dark'.

```typescript
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider defaultColorScheme="dark">
      <App />
    </MantineProvider>
  );
}

```

--------------------------------

### Override Mantine Component Styles with CSS Modules

Source: https://mantine.dev/get-started/index

Shows how to override default Mantine component styles using CSS Modules. It demonstrates targeting specific states like ':disabled' and using Mantine's PostCSS mixins for theme-aware styling.

```css
.root {
  border-top-left-radius: var(--mantine-radius-xl);
  border-bottom-left-radius: var(--mantine-radius-xl);
  padding-left: 4px;

  /* The following styles will be applied only when button is disabled */
  &[data-disabled] {
    /* You can use Mantine PostCSS mixins inside data attributes */
    @mixin light {
      border: 1px solid var(--mantine-color-gray-2);
    }

    @mixin dark {
      border: 1px solid var(--mantine-color-dark-4);
    }

    /* You can target child elements that are inside .root[data-disabled] */
    & .section[data-position='left'] {
      opacity: 0.6;
    }
  }
}

.section {
  /* Apply styles only to left section */
  &[data-position='left'] {
    --section-size: calc(var(--button-height) - 8px);

    background-color: var(--mantine-color-body);
    color: var(--mantine-color-text);
    height: var(--section-size);
    width: var(--section-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mantine-radius-xl);
  }

  &[data-position='right'] {
    @mixin rtl {
      transform: rotate(180deg);
    }
  }
}

```

--------------------------------

### Mantine Form with Uncontrolled Mode and Validation

Source: https://mantine.dev/get-started/index

Demonstrates the usage of the useForm hook from @mantine/form in uncontrolled mode. It includes initial values for email and terms of service, along with email validation. The form integrates seamlessly with Mantine's TextInput and Checkbox components.

```tsx
import { Button, Checkbox, Group, TextInput } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      email: '',
      termsOfService: false,
    },

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <form onSubmit={form.onSubmit((values) => console.log(values))}>
      <TextInput
        withAsterisk
        label="Email"
        placeholder="your@email.com"
        key={form.key('email')}
        {...form.getInputProps('email')}
      />

      <Checkbox
        mt="md"
        label="I agree to sell my privacy"
        key={form.key('termsOfService')}
        {...form.getInputProps('termsOfService', { type: 'checkbox' })}
      />

      <Group justify="flex-end" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

```

--------------------------------

### Track element size changes with use-resize-observer in React

Source: https://mantine.dev/get-started/index

The use-resize-observer hook from Mantine allows tracking an element's size and position changes. It returns a ref to attach to the target element and a rect object containing its dimensions. This hook is useful for responsive UIs and dynamic layout adjustments. It requires Mantine's Group and Table components for displaying the element and its dimensions.

```jsx
import { Group, Table } from '@mantine/core';
import { useResizeObserver } from '@mantine/hooks';

function Demo() {
  const [ref, rect] = useResizeObserver();

  return (
    <div className={classes.root}>
      <Group justify="center">
        <div ref={ref} className={classes.demo}>
          Resize me!
        </div>
      </Group>

      <Table
        captionSide="top"
        data={{
          caption: 'Resize element by dragging its right bottom corner',
          head: ['Property', 'Value'],
          body: [
            ['width', rect.width],
            ['height', rect.height],
          ],
        }} />
    </div>
  );
}
```

--------------------------------

### Implement slider with use-move hook in React

Source: https://mantine.dev/get-started/index

The use-move hook from Mantine allows for handling move behavior over a given element, useful for creating custom sliders. It takes an event handler that receives movement data and a state setter to update the slider's value. The hook requires React's useState and clamp utility, along with the IconGripVertical component for the slider thumb.

```jsx
import { useState } from 'react';
import { IconGripVertical } from '@tabler/icons-react';
import { clamp, useMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(0.3);
  const { ref } = useMove(({ x }) => setValue(clamp(x, 0.1, 0.9)));
  const labelFloating = value < 0.2 || value > 0.8;

  return (
    <div className={classes.root}>
      <div className={classes.track} ref={ref}>
        <div
          className={classes.filled}
          style={{
            width: `calc(${value * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}>
          <span className={classes.label} data-floating={labelFloating || undefined} data-filled>
            {(value * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.empty}
          style={{
            width: `calc(${(1 - value) * 100}% - var(--thumb-width) / 2 - var(--thumb-offset) / 2)`,
          }}>
          <span className={classes.label} data-floating={labelFloating || undefined}>
            {((1 - value) * 100).toFixed(0)}
          </span>
        </div>

        <div
          className={classes.thumb}
          style={{ left: `calc(${value * 100}% - var(--thumb-width) / 2)` }}>
          <IconGripVertical stroke={1.5} />
        </div>
      </div>
    </div>
  );
}
```
Tokens:
Raw