5-3-0.mdx

group	title	order	slug	release	date
changelog	Version 5.3.0	1	/changelog/5-3-0/	https://github.com/mantinedev/mantine/releases/tag/5.3.0	September 9th, 2022

import { HooksDemos, GridDemos, IndicatorDemos } from '@mantine/demos';

Form context

@mantine/form package now exports createFormContext function to create provider component, hook to get form object from context and use-form hook with predefined type:

import { createFormContext } from '@mantine/form';
import { TextInput } from '@mantine/core';

// Definition of form values is required
interface FormValues {
  age: number;
  name: string;
}

// createFormContext returns a tuple with 3 items:
// FormProvider is a component that sets form context
// useFromContext hook return form object that was previously set in FormProvider
// useForm hook works the same way as useForm exported from the package but has predefined type
const [FormProvider, useFormContext, useForm] = createFormContext<FormValues>();

function ContextField() {
  const form = useFormContext();
  return <TextInput label="Your name" {...form.getInputProps('name')} />;
}

export function Context() {
  // Create form as described in use-form documentation
  const form = useForm({
    initialValues: {
      age: 0,
      name: '',
    },
  });

  // Wrap your form with FormProvider
  return (
    <FormProvider form={form}>
      <form onSubmit={form.onSubmit(() => {})}>
        <ContextField />
      </form>
    </FormProvider>
  );
}

Indicator improvements

Indicator component now includes more features to work with number labels and precessing prop:

Switch improvements

Switch component now supports thumbIcon prop and any React node can now be used on onLabel and offLabel props:

Grid improvements

Grid.Col component now supports setting column span (and other related responsive props) to auto and content:

use-previous hook

use-previous hook stores the previous value of a state in a ref, it returns undefined on initial render and the previous value of a state after rerender:

Other changes

• ColorSwatch now supports withShadow prop
• MultiSelect dropdown is no longer opened when selected item is removed
• Radio.Group component now supports name prop to set name on every child Radio component
• AppShell component now supports hidden prop to hide Header, Footer, Navbar and Aside components
• Carousel component now supports skipSnaps and containScroll props
• NumberInput type can now be changed
• NotificationsProvider now supports target prop to set Portal target
• New use-session-storage hook