Mantine Core

https://mantine.dev/core/package/
Admin
Mantine Core is a React components library providing essential UI components including buttons,...
Tokens:3,175
Snippets:29
Trust Score:9.2
Update:9 months ago
Show doc for...
Tokens:
Raw
### use-hotkeys Hook Example - React

Source: https://mantine.dev/core/package/index

Showcases the use of the use-hotkeys hook from Mantine's hooks library to bind keyboard shortcuts to specific actions within a React application. This example demonstrates opening the Mantine spotlight search and toggling the color scheme using keyboard combinations. It requires Mantine's core components and spotlight functionality.

```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" />
    </>
  );
}
```

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

### Mantine CSS Module Styling with PostCSS Mixins

Source: https://mantine.dev/core/package/index

This example demonstrates how to style Mantine components using CSS Modules and PostCSS. It shows how to apply base styles, override styles for disabled states using `@mixin light` and `@mixin dark`, and target child elements within the styled component. It also illustrates using PostCSS mixins for responsive and RTL styles.

```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);
    }
  }
}

```

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

### use-move Hook Example - React

Source: https://mantine.dev/core/package/index

Demonstrates the use of the use-move hook from Mantine's hooks library to manage the movement behavior of an element, commonly used for creating custom sliders or draggable interfaces. It utilizes React's useState for managing the element's value and clamp for value constraints.

```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>
  );
}
```

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

### use-resize-observer Hook Example - React

Source: https://mantine.dev/core/package/index

Illustrates the use of the use-resize-observer hook from Mantine's hooks library to monitor an element's size and position changes in real-time. This is useful for responsive designs or dynamic layouts that need to adapt to element dimensions. It integrates with Mantine's Table component to display the observed properties.

```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>
  );
}
```

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

### Mantine Form Management with useForm Hook (React)

Source: https://mantine.dev/core/package/index

Demonstrates the usage of the `useForm` hook from the `@mantine/form` library for managing form state, validation, and submission in a React application. It integrates seamlessly with Mantine input components.

```jsx
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>
  );
}

```

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

### Applying Dark Color Scheme with MantineProvider

Source: https://mantine.dev/core/package/index

This code snippet shows how to enable the dark color scheme for your Mantine application. By wrapping your application component with `MantineProvider` and setting the `defaultColorScheme` prop to 'dark', all Mantine components will automatically adopt the dark theme.

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

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

```

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

### Use Eye Dropper Hook for Color Picking

Source: https://mantine.dev/core/package/index

The `useEyeDropper` hook enables users to pick colors directly from their screen. It checks for browser support, opens the eye dropper interface, and returns the selected color in sRGBHex format. Error handling is included for unsupported browsers or issues during color picking.

```tsx
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>
      )}
      {error && <Text c="red">Error: {error?.message}</Text>}
    </Group>
  );
}

```
Tokens:
Raw