mantine

A fully featured React components library

MIT License

Downloads
13.1M
Stars
26.4K
Committers
574
View Code on GitHub Visit Website View on X
Ecosystems: React, TypeScript, Next, Gatsby

Bot releases are hidden (Show)

mantine - 6.0.2

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/hooks] use-hash: Fix incorrect hash set from hashchange event (#3773)
  • [@mantine/core] PinInput: Fix onComplete prop firing incorrectly (#3715)
  • [@mantine/core] Popover: Add onClose and onOpen events supports for uncontrolled popovers (#3716)
  • [@mantine/core] Select: Fix focus loss when pressing tab inside input element (#3744)
  • [@mantine/core] Anchor: Fix undelrine prop not working for hover state (#3748)
  • [@mantine/core] Switch: Fix body scrolling when input is focused (#3752)
  • [@mantine/core] Popover: Fix incorrect dropdown position when position prop changes (#3753)
  • [@mantine/core] ScrollArea: Add missing viewportProps prop to ScrollArea.Autosize (#3760)
  • [@mantine/core] JsonInput: Fix incorrect serialization logic (#3769)
  • [@mantine/core] Drawer: Fix incorrect static selector (#3730)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.1...6.0.2

mantine - 6.0.1

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/core] SegmentedControl: Fix incorrect border styles in vertical orientation (#3670)
  • [@mantine/core] Fix incorrect error messages in Popover, HoverCard and Menu components (#3638)
  • [@mantine/core] Button: Fix incorrect Button.Group styles that contain only one Button (#3667)
  • [@mantine/dates] Remove disabled level change button from tab order (#3648)
  • [@mantine/core] Transition: Fix exit duration not working (#3664)
  • [@mantine/core] Anchor: Fix dimmed color not working (#3668)
  • [@mantine/core] Alert: Fix content overlap with no title and with close button (#3681)
  • [@mantine/core] AppShell: Fix incorrect CSS variables (#3687)
  • [@mantine/notifications] Add static methods to Notifications (#3689)
  • [@mantine/core] Title: Fix Text props not working (#3690)
  • [@mantine/styles] Fix incorrect CSS variables parsing in theme functions (#3695)
  • [@mantine/dates] DateTimePicker: Fix TimeInput now showing when dropdown was closed with month/year picker (#3710)
  • [@mantine/core] Portal: Add portalProps prop support (#3696)
  • [@mantine/core] Tooltip: Fix incorrect arrow border styles (#3693)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/6.0.0...6.0.1

mantine - 6.0.0

Published by rtivital over 1 year ago

View changelog with demos on mantine.dev website

Breaking changes

The following changes are breaking. Note that although
we've tried to include all breaking changes with migration guides in the list you still may
experience undocumented changes. If you think that these changes worth including in this list,
let us know by opening an issue on GitHub.

Migration to rem/em units

All Mantine components now use rem units. 1rem is considered to be 16px
with medium text size selected by user, all components will scale based on settings specified in browser.
theme.spacing, theme.radius, theme.fontSizes and other theme properties overrides
are now expected to be defined in rem. theme.breakpoints are expected to be defined in em units:

import { MantineProvider } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        spacing: { xs: "1rem", sm: "1.5rem" /* ... */ },
        fontSizes: { xs: "0.8rem", sm: "1.2rem" /* ... */ },
        radius: { xs: "0.1rem", sm: "0.3rem" /* ... */ },
        breakpoints: { xs: "20em", sm: "36em" /* ... */ },
      }}
    >
      <App />
    </MantineProvider>
  );
}

You can no longer use addition, subtraction, division, multiplication and other math operations
with theme values in createStyles and sx prop,
use calc instead:

import { createStyles, rem } from '@mantine/core':

// 5.x expressions that will no longer work in 6.x
createStyles((theme) => ({
  demo: {
    // Values cannot longer be prepended with minus sign
    margin: -theme.spacing.xs,

    // addition, subtraction, division, multiplication
    // and other math operations are no longer available
    paddingLeft: theme.spacing.md + 5,
    paddingRight: theme.spacing.sm / 2,
    paddingTop: theme.spacing.lg * 1.5,
    paddingBottom: theme.spacing.xl - theme.spacing.md,

    // theme values used in sting templates
    // will no longer work with px suffix
    margin: `${theme.spacing.xs}px ${theme.spacing.md}px`
  }
}));

// In 6.0 use calc
createStyles((theme) => ({
  demo: {
    // Use calc to negate theme value
    margin: `calc(${theme.spacing.xs} * -1)`,

    // Use calc and rem function for
    // addition, subtraction, division, multiplication
    paddingLeft: `calc(${theme.spacing.md} + ${rem(5)})`,
    paddingRight: `calc(${theme.spacing.sm} / 2)`,
    paddingTop: `calc(${theme.spacing.lg} * 1.5)`,
    paddingBottom: `calc(${theme.spacing.xl} - ${theme.spacing.md})`,

    // Omit px suffix when using theme values
    margin: `${theme.spacing.xs} ${theme.spacing.md}`
  }
}));

Automatic px to rem conversion

If you use numbers in Mantine components props, they will be treated as px and converted to rem,
for example:

import { ColorSwatch } from "@mantine/core";

function DemoPx() {
  // Specify ColorSwatch size in px, it will be automatically converted to rem
  // Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
  return <ColorSwatch color="#000" size={32} />;
}

function DemoRem() {
  // This demo will have the same size as previous one
  return <ColorSwatch color="#000" size="2rem" />;
}

The same logic is applied to style props available
in every component:

import { Box } from "@mantine/core";

function Demo() {
  // width: 2rem, height: 1rem
  // margin-left: 1rem
  // @media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
  return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}

createStyles breaking changes

createStyles function no longer receives getRef
as a third argument. Use getStylesRef exported from @mantine/core package instead:

// in 5.x, will not work in 6.x
import { createStyles } from '@mantine/core';

createStyles((theme, params, getRef) => {
  child: { ref: getRef('child') },
  parent: { [`& .${getRef('child')}`]: { color: 'red' } },
});

// in 6.x use getStylesRef function
import { createStyles, getStylesRef } from '@mantine/core';

createStyles((theme, params) => {
  child: { ref: getStylesRef('child') },
  parent: { [`& .${getStylesRef('child')}`]: { color: 'red' } },
});

@mantine/notifications breaking changes

@mantine/notifications package no longer exports
NotificationsProvider component. Instead you should add Notifications component to any
part of your application. This change allows to avoid unnecessary rerenders of child components
when notifications state change. Also useNotifications hook is no longer exported from the package.

import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
  );
}

@mantine/rte package deprecation

@mantine/rte package is deprecated – it will no longer receive updates (last version will remain 5.x)
and it may no longer be compatible with @mantine/core and @mantine/hooks packages (6.x and later versions).
Migrate to @mantine/tiptap as soon as possible.

@mantine/dates breaking changes

All components from @mantine/dates package were rebuilt from scratch.
Note that the following list is not full as it is difficult to include all breaking changes
after a full package revamp – follow documentation of component that you use to find out about
all breaking changes.

  • Styles API selectors of components were changed
  • DatePicker component was renamed to DatePickerInput
  • Calendar component was renamed to DatePicker
  • TimeInput component was migrated to native input[type="time"] as it provides better UX in most browsers
  • TimeRangeInput component was removed – it is no longer exported from the package
  • DateRangePicker and RangeCalendar components were removed – you can now setup dates range picking in DatePicker and DatePickerInput
  • amountOfMonths prop was renamed to numberOfColumns in all components
  • DatePickerInput (previously DatePicker) component no longer supports allowFreeInput prop – use DateInput component instead
  • DatePicker (previously Calendar) component no longer supports dayClassName and dayStyle props – use getDayProps instead

Theme object changes

You can no longer define dateFormat and datesLocale in theme,
use components prop to specify format instead:

// 5.x, will not work in 6.x
import { MantineProvider } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider theme={{ dateFormat: "MMMM DD YYYY", datesLocale: "es" }}>
      <App />
    </MantineProvider>
  );
}

// 6.x – use components props
import { DatePickerInput } from "@mantine/dates";

function Demo() {
  return <DatePickerInput valueFormat="MMMM D, YYYY" locale="es" />;
}

Modal and Drawer breaking changes

Modal and Drawer components
props were renamed:

  • withFocusReturn → returnFocus
  • overflow → scrollAreaComponent (scroll now is always handled inside modal/drawer)
  • overlayBlur → overlayProps.blur
  • overlayColor → overlayProps.color
  • overlayOpacity → overlayProps.opacity
  • exitTransitionDuration → transitionProps.exitDuration
  • transition → transitionProps.transition
  • transitionDuration → transitionProps.duration
  • transitionTimingFunction → transitionProps.timingFunction

Modal styles API changes:

  • modal selector was renamed to content

Drawer styles API changes:

  • drawer selector was renamed to content

NumberInput breaking changes

NumberInput component types for value, defaultValue
and onChange props were changed. It now expects value to be number | '' (number or empty string) instead
of number | undefined. This change was made to address multiple bugs that happened because it was
not possible to differentiate controlled and uncontrolled NumberInput.

import { useState } from "react";
import { NumberInput } from "@mantine/core";

function Demo() {
  const [value, setValue] = useState<number | "">(0);
  return <NumberInput value={value} onChange={setValue} />;
}

Pagination breaking changes

  • Styles API selectors were changed
  • Renamed/removed props:
    • itemComponent – removed, use getItemProps or static components instead
    • getItemAriaLabel – removed, use getItemProps prop instead
    • initialPage → defaultValue
    • page → value

@mantine/spotlight breaking changes

Spotlight component was migrated to use Modal
under the hood. Its Styles API selectors and some props names were changed – it now supports all Modal component props.

Renamed props:

  • overlayBlur → overlayProps.blur
  • overlayColor → overlayProps.color
  • overlayOpacity → overlayProps.opacity
  • exitTransitionDuration → transitionProps.exitDuration
  • transition → transitionProps.transition
  • transitionDuration → transitionProps.transition
  • transitionTimingFunction → transitionProps.timingFunction

Spotlight actions are now fully controlled:

  • actions prop no longer accept a callback function, only a list of actions
  • To make register/remove features to work you will need to store actions in state

Other breaking changes

  • Text no longer supports variant="link", use Anchor instead
  • Input Styles API was changed – disabled, invalid and withIcon selectors are no longer available, they were migrated to data-disabled, data-invalid and data-with-icon attributes
  • PasswordInput Styles API was changed – invalid and withIcon selectors are no longer available, use data-invalid and data-with-icon attributes with innerInput selector
  • invalid prop was renamed to error in Input component
  • FileInput, Select and MultiSelect components no longer support clearButtonLabel and clearButtonTabIndex props, use clearButtonProps instead to add any extra props to the clear button
  • @mantine/next package no longer exports NextLink component
  • Checkbox.Group, Switch.Group and Radio.Group components no longer include Group – orientation, offset and spacing props are no longer supported. This change gives you more freedom on how to organize inputs layout.
  • Chip.Group no longer includes Group – you need to manage layout on your side
  • List component Styles API was changed, it no longer has withIcon selector, use data-with-icon attribute instead
  • withFocusReturn prop was renamed to returnFocus in Modal and Drawer components
  • Card component now uses padding prop instead of p to offset Card.Section components
  • RichTextEditor now depends on @tabler/icons-react (>=2.1.0) package instead of @tabler/icons
  • @mantine/core package no longer exports GroupedTransition component, use multiple Transition components instead
  • use-scroll-lock hook is deprecated, all Mantine components now use react-remove-scroll
  • ScrollArea.Autosize component prop maxHeight is removed, it is replaced with mah style prop
  • SegmentedControl component Styles API was changed – labelActive and disabled selectors were removed (replaced with data-active and data-disabled attributes on label selector), active selector was renamed to indicator
  • Notification component prop disallowClose prop was renamed to withCloseButton, it also was changed in notifications system
  • Tooltip component props transition and transitionDuration were renamed to transitionProps
  • Popover, HoverCard, Menu, Select, MultiSelect, ColorInput and Autocomplete components transition, transitionDuration and exitTransitionDuration props were renamed to transitionProps
  • Indicator component no longer has the props dot, showZero and overflowCount. Use disabled and label instead to recreate the previous behavior.

Variants and sizes on MantineProvider

You can now use MantineProvider to add variants to all Mantine components that support Styles API
and sizes to components that support size prop.

Variants:

import { MantineProvider, Button, Group } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            variants: {
              danger: (theme) => ({
                root: {
                  backgroundColor: theme.colors.red[9],
                  color: theme.colors.red[0],
                  ...theme.fn.hover({ backgroundColor: theme.colors.red[8] }),
                },
              }),

              success: (theme) => ({
                root: {
                  backgroundImage: theme.fn.linearGradient(
                    45,
                    theme.colors.cyan[theme.fn.primaryShade()],
                    theme.colors.teal[theme.fn.primaryShade()],
                    theme.colors.green[theme.fn.primaryShade()]
                  ),
                  color: theme.white,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button variant="danger">Danger variant</Button>
        <Button variant="success">Success variant</Button>
      </Group>
    </MantineProvider>
  );
}

Sizes:

import { MantineProvider, Button, Group } from "@mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            sizes: {
              xxxs: () => ({
                root: {
                  height: "1.25rem",
                  padding: "0.3125rem",
                  fontSize: "0.5rem",
                },
              }),

              xxl: (theme) => ({
                root: {
                  fontSize: "1.75rem",
                  height: "5rem",
                  padding: theme.spacing.xl,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button size="xxxs">XXXS button</Button>
        <Button size="xxl">XXL button</Button>
      </Group>
    </MantineProvider>
  );
}

Updated @mantine/dates package

@mantine/dates package was rebuilt from scratch, it now includes new components to
pick year, month
and dates. All new pickers support type prop that can be:

  • default – Date | null – user can pick one date
  • multiple – Date[] – user can pick any number of dates
  • range – [Date | null, Date | null] – user can pick a range of two dates

type="default" example with DatePickerInput component:

import { useState } from "react";
import { DatePickerInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

type="multiple" example with MonthPickerInput component:

import { useState } from "react";
import { MonthPickerInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return (
    <MonthPickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

type="range" example with YearPickerInput component:

import { useState } from "react";
import { YearPickerInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <YearPickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

DateTimePicker component 

import { DateTimePicker } from "@mantine/dates";

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

DateInput 

import { useState } from "react";
import { DateInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateInput
      value={value}
      onChange={setValue}
      label="Date input"
      placeholder="Date input"
      maw={400}
      mx="auto"
    />
  );
}

YearPicker component 

import { useState } from "react";
import { Group } from "@mantine/core";
import { YearPicker } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <Group position="center">
      <YearPicker value={value} onChange={setValue} />
    </Group>
  );
}

YearPickerInput 

import { useState } from "react";
import { YearPickerInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <YearPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

MonthPicker 

import { useState } from "react";
import { Group } from "@mantine/core";
import { MonthPicker } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <Group position="center">
      <MonthPicker value={value} onChange={setValue} />
    </Group>
  );
}

MonthPickerInput 

import { useState } from "react";
import { MonthPickerInput } from "@mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <MonthPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Calendar

Calendar component can now be used as a base for date pickers with custom logic.
For example, you can build week picker component with it:

import { useState } from "react";
import { Group } from "@mantine/core";
import { Calendar } from "@mantine/dates";
import dayjs from "dayjs";

function getDay(date: Date) {
  const day = date.getDay();
  return day === 0 ? 6 : day - 1;
}

function startOfWeek(date: Date) {
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate() - getDay(date) - 1
  );
}

function endOfWeek(date: Date) {
  return dayjs(
    new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate() + (6 - getDay(date))
    )
  )
    .endOf("date")
    .toDate();
}

function isInWeekRange(date: Date, value: Date | null) {
  return (
    value &&
    dayjs(date).isBefore(endOfWeek(value)) &&
    dayjs(date).isAfter(startOfWeek(value))
  );
}

function Demo() {
  const [hovered, setHovered] = useState<Date | null>(null);
  const [value, setValue] = useState<Date | null>(null);

  return (
    <Group position="center">
      <Calendar
        withCellSpacing={false}
        getDayProps={(date) => {
          const isHovered = isInWeekRange(date, hovered);
          const isSelected = isInWeekRange(date, value);
          const isInRange = isHovered || isSelected;
          return {
            onMouseEnter: () => setHovered(date),
            onMouseLeave: () => setHovered(null),
            inRange: isInRange,
            firstInRange: isInRange && date.getDay() === 1,
            lastInRange: isInRange && date.getDay() === 0,
            selected: isSelected,
            onClick: () => setValue(date),
          };
        }}
      />
    </Group>
  );
}

DatesProvider

DatesProvider component lets you set various settings that are shared across all
components exported from @mantine/dates package:

import "dayjs/locale/ru";
import {
  DatesProvider,
  MonthPickerInput,
  DatePickerInput,
} from "@mantine/dates";

function Demo() {
  return (
    <DatesProvider
      settings={{ locale: "ru", firstDayOfWeek: 0, weekendDays: [0] }}
    >
      <MonthPickerInput label="Pick month" placeholder="Pick month" />
      <DatePickerInput mt="md" label="Pick date" placeholder="Pick date" />
    </DatesProvider>
  );
}

New PinInput component

import { PinInput, Group } from "@mantine/core";

function Demo() {
  return (
    <Group position="center">
      <PinInput />
    </Group>
  );
}

Overlay component improvements

Overlay component now supports the following new features:

  • You can now render children inside Overlay
  • When center prop is set overlay children will be centered vertically and horizontally
  • New fixed prop controls position, when it is set position: fixed, when it is not set position: absolute 
import { useState } from "react";
import { Button, Overlay, Image, AspectRatio } from "@mantine/core";

function Demo() {
  const [visible, setVisible] = useState(false);

  return (
    <AspectRatio ratio={16 / 9} maw={400} mx="auto">
      <Image
        src="https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
        onClick={() => setVisible(false)}
      />
      {!visible && (
        <Overlay blur={15} center>
          <Button color="red" radius="xl" onClick={() => setVisible(true)}>
            NSFW, click to reveal
          </Button>
        </Overlay>
      )}
    </AspectRatio>
  );
}

Modal and Drawer components improvements

Modular components

Modal and Drawer components
now expose modular components that can be used to build custom modals and drawers. This feature
allows you to have full control over the component rendering. Previous approach with single
Modal/Drawer component will still work the same way as before.

import { useDisclosure } from "@mantine/hooks";
import { Modal, Button, Group } from "@mantine/core";

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal.Root opened={opened} onClose={close}>
        <Modal.Overlay />
        <Modal.Content>
          <Modal.Header>
            <Modal.Title>Modal title</Modal.Title>
            <Modal.CloseButton />
          </Modal.Header>
          <Modal.Body>Modal content</Modal.Body>
        </Modal.Content>
      </Modal.Root>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

Built in ScrollArea

Modal and Drawer components
now use ScrollArea component to handle scroll:

import { useDisclosure } from "@mantine/hooks";
import { Modal, Group, Button } from "@mantine/core";

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  const content = Array(100)
    .fill(0)
    .map((_, index) => <p key={index}>Modal with scroll</p>);

  return (
    <>
      <Modal opened={opened} onClose={close} title="Header is sticky">
        {content}
      </Modal>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

Modal offset

Modal component now supports xOffset and yOffset props
to control vertical and horizontal offsets of the modal content:

import { useDisclosure } from "@mantine/hooks";
import { Modal, Button, Group } from "@mantine/core";

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal
        opened={opened}
        onClose={close}
        title="Authentication"
        yOffset="1vh"
        xOffset={0}
      >
        <AuthenticationForm noShadow noPadding />
      </Modal>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

keepMounted prop

Components that use Transition now support keepMounted.
When keepMounted prop is set component will not be unmounted from the DOM and instead it will
be hidden with display: none styles.

keepMounted prop is supported by the following components:

Pagination component improvements

Pagination component now supports changing icons with props and modular components:

import { Group, Pagination } from "@mantine/core";

function Demo() {
  return (
    <Pagination.Root total={10}>
      <Group spacing={5} position="center">
        <Pagination.First />
        <Pagination.Previous />
        <Pagination.Items />
        <Pagination.Next />
        <Pagination.Last />
      </Group>
    </Pagination.Root>
  );
}

@mantine/spotlight improvements

Controlled actions

You can now fully control actions state:

import { useState } from "react";
import { Group, Button } from "@mantine/core";
import { SpotlightProvider, spotlight } from "@mantine/spotlight";
import { IconAlien, IconSearch } from "@tabler/icons-react";

function SpotlightControls() {
  const [registered, setRegistered] = useState(false);

  return (
    <Group position="center">
      <Button onClick={spotlight.open}>Open spotlight</Button>
      {registered ? (
        <Button
          variant="outline"
          color="red"
          onClick={() => {
            setRegistered(false);
            spotlight.removeActions(["secret-action-1", "secret-action-2"]);
          }}
        >
          Remove extra actions
        </Button>
      ) : (
        <Button
          variant="outline"
          onClick={() => {
            setRegistered(true);
            spotlight.registerActions([
              {
                id: "secret-action-1",
                title: "Secret action",
                description: "It was registered with a button click",
                icon: <IconAlien size="1.2rem" />,
                onTrigger: () => console.log("Secret"),
              },
              {
                id: "secret-action-2",
                title: "Another secret action",
                description:
                  "You can register multiple actions with just one command",
                icon: <IconAlien size="1.2rem" />,
                onTrigger: () => console.log("Secret"),
              },
            ]);
          }}
        >
          Register extra actions
        </Button>
      )}
    </Group>
  );
}

export function Demo() {
  // It is required to store actions in state for register/remove functions to work
  const [actions, setActions] = useState([
    /* ... see in previous demos */
  ]);

  return (
    <SpotlightProvider
      actions={actions}
      onActionChange={setActions}
      searchIcon={<IconSearch size="1.2rem" />}
      searchPlaceholder="Search..."
      shortcut="mod + shift + C"
    >
      <SpotlightControls />
    </SpotlightProvider>
  );
}

Controlled search query

You can now fully control search query:

import { useState } from "react";
import { Button, Group } from "@mantine/core";
import {
  SpotlightProvider,
  spotlight,
  SpotlightAction,
} from "@mantine/spotlight";

function SpotlightControl() {
  return (
    <Group position="center">
      <Button onClick={spotlight.open}>Open spotlight</Button>
    </Group>
  );
}

function Demo() {
  const [query, setQuery] = useState("");
  const actions: SpotlightAction[] =
    query !== "%%secret%%"
      ? [
          {
            title: "Reveal secret actions",
            description: "Click this action to reveal secret actions",
            onTrigger: () => setQuery("%%secret%%"),
            closeOnTrigger: false,
          },
        ]
      : [
          {
            title: "Super secret action",
            keywords: "%%secret%%",
            onTrigger: () => {},
          },
          {
            title: "Rick roll",
            description: "Do not click",
            keywords: "%%secret%%",
            onTrigger: () => {
              window.location.href =
                "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
            },
          },
        ];

  return (
    <SpotlightProvider
      actions={actions}
      query={query}
      onQueryChange={setQuery}
      searchIcon={<IconSearch size="1.2rem" />}
      searchPlaceholder="Search..."
      shortcut="mod + shift + 1"
      nothingFoundMessage="Nothing found..."
    >
      <SpotlightControl />
    </SpotlightProvider>
  );
}

Other changes

  • rightSection of all inputs is now based on size prop by default (previously it was a static value)
  • Chip component now supports filled, outline and light variants
  • theme.headings.fontFamily now fallbacks to theme.fontFamily if value is not defined on MantineProvider
  • @mantine/notifications package now exports notifications object that includes functions to show, update, hide, clean and clean queue
  • @mantine/nprogress, @mantine/modals and @mantine/spotlight packages now exports nprogress, modals and spotlight objects with all package methods
  • use-os hook now sets initial value in useLayoutEffect by default (configurable with option) to avoid hydration mismatches
  • use-id hook now always generate random id when component is mounted to replace id generated by React.useId hook. This change prevents browser from showing incorrect autocomplete suggestions for inputs.
  • Timeline component now supports root Styles API selector
  • SegmentedControl component now supports readOnly prop
  • Kbd component now supports size prop
  • use-form now supports form.getTransformedValues handler
  • Tooltip now has better color contrast with dark color scheme
  • Highlight component now supports changing styles per highlighted substring
  • JsonInput component now supports serialize and deserialize props to allow custom JSON formats
  • Modals manager now supports type safe context modals
  • @mantine/form now exports new matchesField validator
  • form.getInputProps withError parameter is now true by default for all inputs
  • New use-headroom hook

Previous documentation versions

mantine - 5.10.5

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/dates] Fix inputWrapperOrder not supported by TimeInput and TimeInputRange components (#3520)
  • [@mantine/core] Fix AppShell, Dialog, Drawer and Modal components incorrect style props type
  • [@mantine/modals] Fix centered modal jumping when closed (#3570)
  • [@mantine/core] Popover: Fix dropdown not following target element inside scrollable container when withinPortal is set (#3576)
  • [@mantine/core] Tooltip: Fix incorrect disabled prop behavior in Tooltip.Floating (#3611)
  • [@mantine/core] Table: Fix incorrect th styles inside tbody (#3556)
  • [@mantine/core] Add ColSpan type exports (#3564)
  • [@mantine/core] PasswordInput: Fix typo in selector (#3553)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.4...5.10.5

mantine - 5.10.4

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/core] PasswordInput: Hide native browser password reveal button in Edge
  • [@mantine/core] Notification: Fix content overflow with very large children (#3540)
  • [@mantine/core] Make useInputProps hook strongly typed (#3486)
  • [@mantine/core] MultiSelect: Add missing default value for dropdownPosition (#3490)
  • [@mantine/core] Table: Fix styles for th elements not working inside tbody (#3504)
  • [@mantine/modals] Fix multiple closeModal issues (#3498)
  • [@mantine/hooks] use-disclosure: Memoize functions (#3513)
  • [@mantine/hooks] use-focus-trap: Fix aria-hidden not being removed from the body when target element changes (#3526)
  • [@mantine/core] Allow usage of read only arrays in Select and MulstiSelect components (#3542)
  • [@mantine/core] Text: Add option to truncate text from the start (#3550)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.3...5.10.4

mantine - 5.10.3

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/core] Add option to pass additional props to file input in FileButton and FileInput components
  • [@mantine/form] Fix onBlur missing in getInputProps type
  • [@mantine/form] Improve isEmail validation logic (#3443)
  • [@mantine/core] SimpleGrid: Fix zero spacing and vertical spacing nor working in breakpoints (#3453)
  • [@mantine/dropzone] Add avif image mime type (#3166)
  • [@mantine/dates] DateRangePicker: Fix incorrect openDropdownOnClear behavior (#3299)
  • [@mantine/hooks] use-hotkeys: Add additional configuration to allow hook usage with content editable elements (#3410)
  • [@mantine/core] Add hoverOnSearchChange prop to Autocomplete, Select and MultiSelect (#3102)
  • [@mantine/styles] Fix incorrect useComponentDefaultProps type (#3484)
  • [@mantine/core] MultiSelect: Allow to disable selected items filtering from the dropdown items list (#3104)
  • [@mantine/form] Fix zodResolver not being type safe with older versions of TypeScript (#3431)
  • [@mantine/carousel] Fix carousel with vertical orientation working incorrectly with RTL direction (#3438)
  • [@mantine/core] Fix dropdown position not being updated after Select, MultiSelect and Autocomplete dropdown was flipped and user started searching (#3439)
  • [@mantine/core] Pagination: Fix spacing={0} not working (#3456)
  • [@mantine/core] Dependency: migrate @floating-ui/react-dom-interactions to @floating-ui/react (#3471)
  • [@mantine/core] Skeleton: Allow overflow when children are visible (#3475)
  • [@mantine/core] TransferList: add transferAllMatchingFilter prop (#3436)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.2...5.10.3

mantine - 5.10.2

Published by rtivital over 1 year ago

What's Changed

  • [@mantine/modals] Fix modals closing issues (#3300)
  • [@mantine/tiptap] Update @tabler/icons installation instructions (#3415)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.1...5.10.2

mantine - 5.10.1

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/core] HoverCard: Add missing types for classNames, styles and unstyled props (#3257)
  • [@mantine/modals] Fix incorrect close modal logic (#3300)
  • [@mantine/hooks] use-set-state: Make setState fucntion stable across renders (#3357)
  • [@mantine/tiptap] Fix incorrect styles on placeholder component (#3382)
  • [@mantine/hooks] use-local-storage: Fix value not updated when local storage value is cleared (#3298)
  • [@mantine/core] Fix unexpected extra space added at the bottom of Switch, Radio and Checkbox components (#3303)
  • [@mantine/hooks] use-full-screen: Fix hook not working on iOS (#3327)
  • [@mantine/core] Stepper: Fix allowStepSelect not working on Stepper.Step component (#3340)
  • [@mantine/form] Fix useForm initialDirty stops form.isDirty from working as expected (#3372)
  • [@mantine/core] Stack: Fix incorrect default justify prop (#3293)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.10.0...5.10.1

mantine - 5.10.0

Published by rtivital almost 2 years ago

View changelog with demos on Mantine website

Theme based default props

Default props on MantineProvider
can now subscribe to theme:

import { MantineProvider, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        components: {
          Button: {
            defaultProps: (theme) => ({
              color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
            }),
          },
        },
      }}
    >
      <Button>Demo button</Button>
    </MantineProvider>
  );
}

@mantine/form validators

@mantine/form package now exports isNotEmpty, isEmail, matches, isInRange and hasLength functions
to simplify validation of common fields types:

import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@mantine/core';

function Demo() {
  const form = useForm({
    initialValues: {
      name: '',
      job: '',
      email: '',
      favoriteColor: '',
      age: 18,
    },

    validate: {
      name: hasLength({ min: 2, max: 10 }, 'Name must be 2-22 characters long'),
      job: isNotEmpty('Enter your current job'),
      email: isEmail('Invalid email'),
      favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
      age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
    },
  });

  return (
    <Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
      <TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
      <TextInput
        label="Your job"
        placeholder="Your job"
        withAsterisk
        mt="md"
        {...form.getInputProps('job')}
      />
      <TextInput
        label="Your email"
        placeholder="Your email"
        withAsterisk
        mt="md"
        {...form.getInputProps('email')}
      />
      <TextInput
        label="Your favorite color"
        placeholder="Your favorite color"
        withAsterisk
        mt="md"
        {...form.getInputProps('favoriteColor')}
      />
      <NumberInput
        label="Your age"
        placeholder="Your age"
        withAsterisk
        mt="md"
        {...form.getInputProps('age')}
      />

      <Group position="right" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </Box>
  );
}

Flagpack extension

New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack.
The package is tree shakable – all unused components are not included in the production bundle.
All flag components support style props.

Other changes

  • ColorPicker component now supports onColorSwatchClick prop
  • ColorInput now supports closeOnColorSwatchClick prop
  • ColorInput now shows eye dropper in all supported browsers by default
  • @mantine/form now exports TransformedValues type to get type of transformed values from the form object
  • RingProgress now supports changing root segment color with rootColor prop
  • Text component now supports truncate prop
  • Stepper component now supports allowSelectNextSteps prop
  • @mantine/form now exports superstructResolver to allow schema based validation with superstruct
  • FileInput and FileButton components now support capture prop

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.6...5.10.0

mantine - 5.9.6

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/spotlight] Allow overriding search input size (#3181)
  • [@mantine/core] Tooltip: Fix incorrect Tooltip.Floating Styles API name
  • [@mantine/core] ScrollArea: Add viewportProps support
  • [@mantine/core] Title: Remove span prop

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.5...5.9.6

mantine - 5.9.5

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/tiptap] Fix LinkControl not supporting custom icon (#3196)
  • [@mantine/hooks] use-network: Fix incorrect initial online/offline state detection (#3178)
  • [@mantine/core] Space: Add responsive values support to w and h props
  • [@mantine/core] FileInput: Fix value overflow when selected value name is too large

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.4...5.9.5

mantine - 5.9.4

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/core] Switch: Fix incorrect alignment (#3082)
  • [@mantine/dates] Fix DateRangePicker and DatePicker components not supporting readOnly prop (#3089)
  • [@mantine/hooks] use-click-outside: Fix incorrect typescript definition for strict mode (#3119)
  • [@mantine/core] Input: Fix incorrect Input.Error role, connect Input.Description and Input.Error to the input element with aria-describedby (#3146)
  • [@mantine/tiptap] Fix control styles API working incorrectly for Link and Color control (#3148)
  • [@mantine/modals] Increase default zIndex to allow usage with Modal component (#3154)
  • [@mantine/hooks] use-click-outside: Fix incorrect outside clicks detection when click target is html element (#3143)

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.3...5.9.4

mantine - 5.9.3

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/core] TypographyStylesProvider: Fix incorrect <code /> styles
  • [@mantine/styles] Allow createStyle to go to the original definition (#3108)
  • [@mantine/core] Menu: Change hovered item background-color to make it consistent with other components (#3109)
  • [@mantine/tiptap] Fix incorrect RichTextEditor ref type (#3142)
  • [@mantine/form] Fix typing issue with nested interfaces in passed type (#3157)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.2...5.9.3

mantine - 5.9.2

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/form] Fix incorrect values type in validation rules (#3110)
  • [@mantine/core] ScrollArea: Fix flickering
  • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
  • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#3115)
  • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

mantine - 5.9.1

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/styles] Add access to theme in defaultProps (#2950)
  • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#3045)
  • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#3025)
  • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#3070)
  • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#3080)
  • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#3097)
  • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#3100)
  • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#3101)
  • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#3103)
  • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#3106)
  • [@mantine/spotlight] Fix theme.defaultRadius not being respected
  • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
  • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
  • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#3053)
  • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#3085)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

mantine - 5.9.0

Published by rtivital almost 2 years ago

View changelog with demos on mantine.dev website

use-eye-dropper hook

New use-eye-dropper hook provides an interface to work with EyeDropper API.
It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

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

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

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

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

  return (
    <Group>
      <ActionIcon variant="default" onClick={pickColor}>
        <IconColorPicker size={16} stroke={1.5} />
      </ActionIcon>
      {color ? (
        <Group spacing="xs">
          <ColorSwatch color={color} />
          <Text>Picked color: {color}</Text>
        </Group>
      ) : (
        <Text>Click the button to pick color</Text>
      )}
      {error && <Text color="red">Error: {error?.message}</Text>}
    </Group>
  );
}

ColorInput eye dropper

ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section.
This feature depends on EyeDropper API,
the eye dropper will not be rendered if the API is not supported.

import { ColorInput } from '@mantine/core';

function Demo() {
  return (
    <ColorInput
      withEyeDropper
      placeholder="With eye dropper"
      label="Pick any color from the page"
    />
  );
}

AppShell alt layout

AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

Responsive Grid gutter

Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

import { Grid } from '@mantine/core';

function Demo() {
  return (
    <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
      <Grid.Col span={4}>1</Grid.Col>
      <Grid.Col span={4}>2</Grid.Col>
      <Grid.Col span={4}>3</Grid.Col>
    </Grid>
  );
}

Static components default props

All static components now support default props on MantineProvider.
The following example demonstrates how to add default props to Menu.Item, Tabs.List and
RichTextEditor.Toolbar components:

import { MantineProvider, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          MenuItem: {
            defaultProps: { color: 'red' },
          },

          TabsList: {
            defaultProps: {
              position: 'right',
            },
          },

          RichTextEditorToolbar: {
            defaultProps: {
              sticky: true,
              stickyOffset: 60,
            },
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

Input.Placeholder component

Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element
or do not support placeholder property natively:

import { Input } from '@mantine/core';

function Demo() {
  return (
    <Input component="button">
      <Input.Placeholder>Placeholder content</Input.Placeholder>
    </Input>
  );
}

Other changes

  • RangeSlider component now supports maxRange prop
  • Stepper component now supports any CSS color value in color prop
  • use-hotkeys hook now allows to configure whether default behavior should be prevented
  • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

mantine - 5.8.4

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
  • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#3069)
  • [@mantine/core] Drawer: Add missing Styles API selector for body (#3056)
  • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#3058)
  • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#3062)
  • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#3065)
  • [@mantine/tiptap] Add ref forwarding (#3068)

Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

mantine - 5.8.3

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#3010)
  • [@mantine/tiptap] Fix incorrect content border-radius
  • [@mantine/tiptap] Fix placeholder extension not working as expected
  • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#3027)
  • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#3011)

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

mantine - 5.8.2

Published by rtivital almost 2 years ago

What's Changed

  • [@mantine/tiptap] Fix incorrect hr control label
  • [@mantine/tiptap] Fix incorrect editor prop type
  • [@mantine/tiptap] Fix typo in strikethrough label (#3004)
  • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
  • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
  • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#2979)
  • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#2956)
  • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

mantine - 5.8.0

Published by rtivital almost 2 years ago

View changelog with demos on mantine.dev website

Tiptap rich text editor

New @mantine/tiptap package is a replacement
for @mantine/rte package. RichTextEditor
component is now based on Tiptap, it supports all of
Tiptap extensions and provides flexible components API.

import { RichTextEditor, Link } from '@mantine/tiptap';
import { useEditor } from '@tiptap/react';
import Highlight from '@tiptap/extension-highlight';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import TextAlign from '@tiptap/extension-text-align';
import Superscript from '@tiptap/extension-superscript';
import SubScript from '@tiptap/extension-subscript';

const content =
  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';

function Demo() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Underline,
      Link,
      Superscript,
      SubScript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
          <RichTextEditor.ClearFormatting />
          <RichTextEditor.Highlight />
          <RichTextEditor.Code />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
          <RichTextEditor.H4 />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Blockquote />
          <RichTextEditor.Hr />
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.Subscript />
          <RichTextEditor.Superscript />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignJustify />
          <RichTextEditor.AlignRight />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

@mantine/rte package deprecation

Quill based RichTextEditor is now deprecated.
@mantine/rte package will no longer receive any updates, support for it
will be discontinued when 6.0.0 version is released. We recommend to switch
to Tiptap based editor as soon as possible.

Other changes

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

Package Rankings
Top 0.48% on Npmjs.org
Badges
Extracted from project README
NPM GitHub contributors npm npm Help wanted Discord X Follow
Related Projects
easyreadme

Easyreadme helps you simplify README creation and generate visually stunning ones with the help o...

03 Sep 2023 168
digital-garden

An open source blog (digital garden) template for developers

14 Jun 2023 257