A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital about 2 years ago
View changelog with demos on mantine.dev
@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>
);
}
precessing
propthumbIcon
prop and any React node can now be used on onLabel
and offLabel
propsauto
and content
: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:
import { TextInput, Text } from '@mantine/core';
import { usePrevious, useInputState } from '@mantine/hooks';
function Demo() {
const [value, setValue] = useInputState('');
const previousValue = usePrevious(value);
return (
<div>
<TextInput
label="Enter some text here"
placeholder="Enter some text here"
id="previous-demo-input"
value={value}
onChange={setValue}
/>
<Text mt="md">Current value: {value}</Text>
<Text>Previous value: {previousValue}</Text>
</div>
);
}
withShadow
propname
prop to set name on every child Radio componenthidden
prop to hide Header, Footer, Navbar and Aside componentsskipSnaps
and containScroll
propstype
can now be changedtarget
prop to set Portal targetFull Changelog: https://github.com/mantinedev/mantine/compare/5.2.7...5.3.0
Published by rtivital about 2 years ago
[@mantine/core]
ScrollArea: Fix offsetScrollbarsprop not working for horizontal scrollbars[@mantine/core]
Select: Fix Space key causing page to scroll when used to open dropdown[@mantine/hooks]
use-focus-trap: Fix scrolling of animated elements (#1753)[@mantine/carousel]
Remove margin from the last slide (#2336)Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.6...5.2.7
Published by rtivital about 2 years ago
[@mantine/core]
Drawer: Fix withOverlay={false}
not letting click-through (#2351)[@mantine/core]
PasswordInput: Fix inputWrapperOrder prop not working[@mantine/core]
Modal: Fix content shifting in full screen modal (#2348)[@mantine/notifications]
Remove unexpected message
prop on notification root element (#2327)[@mantine/styles]
Set prepend: true on default emotion cache to fix styles overriding issuesFull Changelog: https://github.com/mantinedev/mantine/compare/5.2.5...5.2.6
Published by rtivital about 2 years ago
[@mantine/core]
ActionIcon: Fix broken styles for loading state (#2281)[@mantine/dropzone]
Fix Dropzone.Fullscreen not disappearing when mouse is moved slowly outside its wrapper (#2305)[@mantine/dates]
TimeInput: Hide clear button when input is disabled (#2321)[@mantine/styles]
Remove prepend: true
from default emotion cache (#1734)[@mantine/core]
Autocomplete: Fix options grouping with dynamic data (#2297)[@mantine/core]
Fix disabled styles for gradient variants of Button and ActionIcon (#2277)[@mantine/core]
Autocomplete: Fix outdated styles api selectors (#2269)[@mantine/core]
Tabs: Add items wrapping to Tabs.List to avoid horizontal scroll[@mantine/carousel]
Fix incorrect type in useAnimationOffsetEffect hookFull Changelog: https://github.com/mantinedev/mantine/compare/5.2.4...5.2.5
Published by rtivital about 2 years ago
[@mantine/hooks]
use-focus-return: Allow shouldReturnFocus to be dynamic (#770)[@mantine/core]
Tooltip: Remove extra markup from disabled Tooltip.Floating (#2220)[@mantine/core]
TypographyStylesProvider: Fix code tag styles when it is nested within pre tag (#2219)[@mantine/prism]
Fix copy icon interfering with code (#2171)[@mantine/core]
Remove hardcodded padding from Select, MultiSelect and Autocomplete dropdowns (#2108)[@mantine/dropzone]
Change onDrop type from File to FileWithPath (#2250)[@mantine/core]
Image: Change fit
prop type to include all possible object-fit values (#2245)Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.3...5.2.4
Published by rtivital about 2 years ago
order
prop not being appliedPublished by rtivital about 2 years ago
[@mantine/hooks]
use-focus-within: Fix incorrect useEffect dependencies (#2178)[@mantine/core]
Grid: Fix offset and order responsive props (#2163)[@mantine/core]
Title: Fix inline
prop being ignored (#2182)[@mantine/carousel]
Remove strict requirement for embla-carousel-react dependency (#2200)[@mantine/core]
NumberInput: Fix onKeyDown and onKeyUp events not workingFull Changelog: https://github.com/mantinedev/mantine/compare/5.2.0...5.2.2
Published by rtivital about 2 years ago
View changelog with demos on documentation website
You can now use styled components syntax with @emotion/styled package:
@mantine/next
, @mantine/remix
and gatsby-plugin-mantine
packages)@emotion/styled
will use Mantine's emotion cache
import styled from '@emotion/styled';
const StyledComponent = styled.div`
text-align: center;
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
padding: 30px;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: ${({ theme }) =>
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
}
`;
function Demo() {
return <StyledComponent />;
}
All inputs that are based on Input and Input.Wrapper components now
support withAsterisk
prop, it allows to display required asterisk without adding required
attribute
to the input element. It is useful when you do not need browser validation in your forms but still want
to display the asterisk.
import { TextInput } from '@mantine/core';
// Will display required asterisk and add `required` attribute to the input element
function RequiredDemo() {
return <TextInput label="test-label" required />;
}
// Will only display the asterisk, `required` attribute is not added to the input element
function AsteriskDemo() {
return <TextInput label="test-label" withAsterisk />;
}
Progress and RingProgress components
now support floating tooltips in sections:
import { RingProgress, Text, Group } from '@mantine/core';
function Demo() {
return (
<Group position="center">
<RingProgress
size={170}
thickness={16}
label={
<Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
Hover sections to see tooltips
</Text>
}
sections={[
{ value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
{ value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
{ value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
]}
/>
</Group>
);
}
Title now supports setting size
different from order
:
import { Title } from '@mantine/core';
function Demo() {
return (
<>
<Title order={3} size="h1">
H3 heading with h1 font-size
</Title>
<Title size="h4">H1 heading with h4 font-size</Title>
<Title size={12}>H1 heading with 12px size</Title>
</>
);
}
It also now supports all Text component props:
import { Title } from '@mantine/core';
function Demo() {
return (
<>
<Title order={3} weight={100} align="center">
H3 heading aligned to center with 100 font-weight
</Title>
<Title order={4} underline color="blue.5">
Underlined h4 heading with blue color
</Title>
<Title order={5} color="dimmed" italic>
Italic dimmed h5 heading
</Title>
</>
);
}
New form.isValid
handler performs form validation with given validation functions, rules object or schema, but unlike
form.validate
it does not set form.errors
and just returns boolean value that indicates whether form is valid.
import { useForm } from '@mantine/form';
const form = useForm({
initialValues: { name: '', age: 0 },
validate: {
name: (value) => (value.trim().length < 2 ? 'Too short' : null),
age: (value) => (value < 18 ? 'Too young' : null),
},
});
// get validation status of all values
form.isValid(); // -> false
// get validation status of field
form.isValid('name'); // -> false
form.resetDirty
will now memoize form values and compare all next changes with stored values instead of initialValues
:
import { useForm } from '@mantine/form';
const form = useForm({ initialValues: { a: 1 } });
form.setFieldValue('a', 2);
form.isDirty(); // -> true
form.setFieldValue('a', 1);
form.isDirty(); // -> false
form.setFieldValue('a', 3);
form.resetDirty();
form.isDirty(); // -> false
form.setFieldValue('a', 3);
form.isDirty(); // -> true
Form rules now receive rule path as third argument:
import { useForm } from '@mantine/form';
const form = useForm({
initialValues: { a: [{ b: 1 }, { b: 2 }] },
validate: {
a: {
// path can be used to get field position relative to other fields
b: (value, values, path) => (path === 'a.0.b' ? 'error' : null),
},
},
});
Prism component now supports custom themes with getPrismTheme
prop:
import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
import { Prism } from '@mantine/prism';
const demoCode = `import { Button } from '@mantine/core';
function Demo() {
return <Button>Hello</Button>
}`;
function Demo() {
return (
<Prism
language="tsx"
getPrismTheme={(_theme, colorScheme) =>
colorScheme === 'light' ? duotoneLight : duotoneDark
}
>
{demoCode}
</Prism>
);
}
gradient
variantvariant
propheight="100%"
order
prop, it can be used to reorder columns when certain breakpoint is reachedkeepMounted
prop. If it is set to false
then components rendered inside Tabs.Panel
will be unmounted when tab is not active.withinPortal
prop set to false
by default to match other componentsFull Changelog: https://github.com/mantinedev/mantine/compare/5.1.7...5.2.0
Published by rtivital about 2 years ago
[@mantine/core]
Add option to not call onChange in creatable Select and MultiSelect when onCreate function returns null or undefined (#2095)[@mantine/core]
Fix incorrect Tooltip and Popover arrow styles for RTL (#2104)[@mantine/core]
Modal: Fix incorrect overflow with fullScreen option (#2118)[@mantine/core]
MultiSelect: Fix incorrect line-height styles (Windows Chrome and Edge) (#2154)[@mantine/core]
MultiSelect: Fix incorrect values maxSelectedValues
handling (#2115)[@mantine/core]
Stepper: Fix incorrect styles for vertical lines when step content has large height (#2106)Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.6...5.1.7
Published by rtivital about 2 years ago
[@mantine/core]
Modal: Fix incorrect scrollbar offset on Windows/Linux (#1721)[@mantine/core]
Collapse: Fixed error thrown when using component with reduced motion (#2116)[@mantine/dates]
Add missing yearLabelFormat, nextDecadeLabel, nextYearLabel, previousDecadeLabel and previousYearLabel props forwarding to Calendar component in DatePicker and DateRangePicker components[@mantine/core]
AppShell: Fix incorect border styles in Navbar, Header, Footer and Aside components when withBorder is set to falseFull Changelog: https://github.com/mantinedev/mantine/compare/5.1.5...5.1.6
Published by rtivital about 2 years ago
[@mantine/hooks]
use-viewport-size: Add missing size calculation to useEffect (#2085)[@mantine/carousel]
Add dynamic slides handling (#2074)[@mantine/core]
Fix keys errors in Select and MultiSelect components when items with group are mixed with items without groups (#2045)[@mantine/core]
Fix incorrect creatable item styles calculation and issue with repeated key (#1662)[@mantine/hooks]
use-interval: Ensure that only one running interval can be rutting at a time (#2093)[@mantine/spotlight]
Fix closeOnTrigger
with not working correctly with 'Enter' key (#2066)[@mantine/core]
Button: Fix incorrect overlap between buttons in Button.Group
for screens with low resolution (#1979)[@mantine/core]
Allow usage of Toolip with Popover.Target
, HoverCard.Target
and Menu.Target
(#1897)[@mantine/carousel]
Add useAnimationOffsetEffect
hook to fix issue with incorrect slides offset when Carousel is used in animated container, for example in Modal (#2041)[@mantine/core]
NumberInput: Fix incorrect events handling for composite events (#1935)[@mantine/hooks]
use-hotkeys: Add option to use getHotkeyHandler
with .addEventListener
events (#1952)[@mantine/styles]
Fix incorrect theme.spacing
calculation when it is overridden with 0 values (#1832)Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.4...5.1.5
Published by rtivital about 2 years ago
[@mantine/core]
Input: Add role="alert"
to Input.Error to make it visible for screen readers (#2023)[@mantine/core]
Add withFocusReturn
prop support to Modal and Drawer components to allow focus behavior configuration (#770)[@mantine/utils]
Fix custom events not firing in strict mode (#2081)[@mantine/core]
AppShell: Fix Navbar cut off for mobile users with address bar on top (#1171)[@mantine/core]
Alert: Allow usage of close button when title is not set (#1348)[@mantine/core]
Notification: Reduce description styles selector specificity to allow color overriding with Styles API (#1627)[@mantine/core]
Slider: Fix "Unable to preventDefault inside passive event listener invocation" error appearing in console for touch devices (#1751)[@mantine/hooks]
Move initial value calculation to useEffect to avoid hydration mismatches (#1764) in the following hooks: use-window-scroll, use-viewport-size, use-media-query, use-reduced-motion, use-network, use-local-storage, use-hash, use-document-visibility, use-color-scheme.Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.3...5.1.4
Published by rtivital about 2 years ago
[@mantine/form]
Fix incorrect onChange events in getInputProps for select element[@mantine/form]
Fix incorrect dirty state detection when list item is added and then removed[@mantine/notifications]
Fix openNotification
function not being called in useEffect
on component mount[@mantine/spotlight]
Fix registerActions
function not being called in useEffect
on component mount[@mantine/nprogress]
Fix resetNavigationProgress
function not being called in useEffect
on component mount[@mantine/core]
FileInput: Fix issue when user was unable to select the same file after the field was cleared[@mantine/core]
Indicator: Fix incorrect color applied if color prop is not setFull Changelog: https://github.com/mantinedev/mantine/compare/5.1.1...5.1.3
Published by rtivital about 2 years ago
closeOnTrigger
prop to allow overriding behavior on action level (#2050)Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.0...5.1.1
Published by rtivital about 2 years ago
You can now reference colors from theme by index in all components:
import { Button, Text, Stack } from '@mantine/core';
function Demo() {
return (
<Stack align="flex-start">
<Text color="blue.3">Text with theme.colors.blue[3] color</Text>
<Button color="pink.4">Button with theme.colors.pink[4] color</Button>
</Stack>
);
}
use-form
hook now exposes fields touched and dirty state:
import { useForm } from '@mantine/form';
import { TextInput, Text } from '@mantine/core';
function Demo() {
const form = useForm({ initialValues: { text: 'initial value' } });
return (
<>
<TextInput
{...form.getInputProps('text')}
label="Touched/dirty demo"
placeholder="Touched/dirty demo"
/>
<Text size="sm" mt="sm">
Touched:{' '}
<Text span color={form.isTouched('text') ? 'blue' : 'red'}>
{form.isTouched('text') ? 'touched' : 'not touched'}
</Text>
</Text>
<Text size="sm">
Dirty:{' '}
<Text span color={form.isDirty('text') ? 'blue' : 'red'}>
{form.isDirty('text') ? 'dirty' : 'not dirty'}
</Text>
</Text>
</>
);
}
RichTextEditor component now supports formats
prop to restrict formats
that user can use in the editor.
In the following example three formats are enabled: bold
, italic
and underline
,
toolbar includes italic
and underline
controls, bold
format can be added with Ctrl + B
keyboard
shortcut, other formats are not available:
import { useState } from 'react';
import { RichTextEditor } from '@mantine/rte';
function Demo() {
const [value, onChange] = useState('<p>Rich text editor content</p>');
return (
<RichTextEditor
value={value}
onChange={onChange}
formats={['bold', 'italic', 'underline']}
controls={[['italic', 'underline']]}
/>
);
}
use-text-selection allows to get current selected text on the page:
import { useTextSelection } from '@mantine/hooks';
function Demo() {
const selection = useTextSelection();
return (
<>
<div>Select some text here or anywhere on the page and it will be displayed below</div>
<div>Selected text: {selection?.toString()}</div>
</>
);
}
use-debounced-state is an alternative for
use-debounced-value for uncontrolled components:
import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';
function Demo() {
const [value, setValue] = useDebouncedState('', 200);
return (
<>
<TextInput
label="Enter value to see debounce effect"
defaultValue={value}
style={{ flex: 1 }}
onChange={(event) => setValue(event.currentTarget.value)}
/>
<Text>Debounced value: {value}</Text>
</>
);
}
You can now use minimal Next.js template
that includes only basic server side rendering setup. It is useful when you want to set up your own tooltip
(configuration for Jest, Storybook, ESLint, prettier and other tools is not included).
theme.fn.primaryShade
and theme.fn.primaryColor
strikethrough
and italic
props to add text-decoration and font-style styles.span
prop as a shorthand for component="span"
.data-active
attribute when Accordion.Item
is expandedvalue
instead of defaultValue
to manage state, note that component does not support react strict modedisabled
prop to prevent spotlight rendering when the prop is set to true
readOnly
propsearchInputProps
prop that spreads props to search inputdata-position
attribute with current positionFull Changelog: https://github.com/mantinedev/mantine/compare/5.0.3...5.1.0
Published by rtivital about 2 years ago
replaceAll
to support server side rendering with Node.js 14yearLabelFormat
prop to Calendar component to allow overriding years format in year and month pickersheight: 'auto'
in Divider component to simplify usage with flexbox containers (#1991)modalId
on modal div element in @mantine/modals
packagerole="separator"
attribute to Divider component (#1933)Full Changelog: https://github.com/mantinedev/mantine/compare/5.0.2...5.0.3
Published by rtivital about 2 years ago
offset
prop to configure spacing between inputs and label in Checkbox.Group
and Radio.Group
componentsuse-did-update
hookDateRangePickerValue
type export to @mantine/dates
packageonChange
handler even if state is uncontrolleddisabled={false}
onClose
function not being called when Menu is closed with outside click or with escape keyclassNames
and styles
propsclassName
in Tooltip component to target element to allow usage with Group and MediaQuery componentstranslate="no"
attribute to Prism and Prism.Tabs components to avoid browser translations of code (#1891)resetOnExit
option to use-mouse hook (#1893)as const
(#1892)@mantine/form
from lodash.clonedeep
to klona
to decrease bundle size@mantine/form
(#1861)@mantine/form
@mantine/modals
packageFull Changelog: https://github.com/mantinedev/mantine/compare/5.0.0...5.0.2
Published by rtivital about 2 years ago
View changelog with demos on Mantine website
Tabs and associated Prism.Tabs components now have new API.
New API provides the following enhancements:
display: none
sx
or classname
propsTabs component now supports the following new props:
radius
prop (defaults to theme.defaultRadius
)inverted
prop allows to display panels before controlsloop
prop control arrow keys behavior (allows to go from first to last and vice versa)activateTabWithKeyboard
prop controls how tabs respond to arrows and Home/End key pressesallowTabDeactivation
prop allows user to deactivate current active tabAccordion component now has new API with the following new props:
variant
prop controls visuals, Accordion now has 4 variantsradius
prop (defaults to theme.defaultRadius
) controls border-radius for all variants except default
loop
prop control arrow keys behavior (allows to go from first to last and vice versa)disabled
prop allows to disable itemsicon
prop adds icon to the opposite side of chevronTooltip now requires children to be an element or a component,
string, numbers, fragments and multiple elements are no longer supported. In addition to that Tooltip no longer wraps target
element with div tag, events are added directly to target element.
import { Tooltip, Badge } from '@mantine/core';
function Demo() {
return (
<>
<Tooltip label="OK">
<button>Native button – ok</button>
</Tooltip>
<Tooltip label="OK">
<Badge>Mantine component – ok</Badge>
</Tooltip>
<Tooltip label="Throws">Raw string, NOT OK – will throw error</Tooltip>
{/* Number, NOT OK – will throw error */}
<Tooltip label="Throws">{2}</Tooltip>
<Tooltip label="Throws">
<>Fragment, NOT OK, will throw error</>
</Tooltip>
<Tooltip label="Throws">
<div>More that one node</div>
<div>NOT OK, will throw error</div>
</Tooltip>
</>
);
}
Popover component now has new API with the following breaking changes:
placement
prop is no longer supported, Popover side and alignment is now controlled with position
proptrapFocus
and withinPortal
props is now false
Popover.Dropdown
componentPopover now supports the following new features:
width="target"
prop will make popover width the same as target elementPopover.Dropdown
can now be styled with system props (sx
, className
, padding props, etc.)Menu component now uses Popover component under the hood and thus its API was changed in the same way:
Menu.Target
Menu.Item
component should now be used within Menu.Dropdown
componenttrapFocus
prop was removed – now it is managed automatically based on trigger
propcloseOnScroll
prop was removed – if you need this feature you will need to implement this logic on your sideAvatarsGroup
component is no longer exported from @mantine/core
package, instead you can now use
Avatar.Group
component which can be combined with Tooltip or Popover to display additional information.
InputWrapper
component is no longer exported from @mantine/core
package, instead you can now use
Input.Wrapper
component.
Dropzone component was migrated to context, it no longer supports
function as children
. Instead, you can use Dropzone.Accept
, Dropzone.Reject
and Dropzone.Idle
components
to display content based on current status.
Other Dropzone
changes:
FullScreenDropzone
component is no loner exported from the @mantine/dropzone
package, use Dropzone.FullScreen
component insteadDropzone.FullScreen
now supports all props from Dropzone
componentDropzone
now uses data-*
attributes instead of classes to change styles of root element based on current statusDropzone
and Dropzone.FullScreen
components now supports the following new props: maxFiles
, autoFocus
, activateOnClick
, activateOnDrag
, activateOnKeyboard
, dragEventsBubbling
, onDragEnter
, onDragLeave
, onDragOver
, onFileDialogCancel
, onFileDialogOpen
, preventDropOnDocument
All components that have dropdowns (DatePicker, Popover, Select, etc.)
were migrated to Floating UI from popper.js:
position
and placement
props were merged into position
prop, for example, position="top-start"
@mantine/core
packageMantineProvider no longer supports styles
, classNames
and defaultProps
props.
Instead of separate props these values should be added to the theme. This change allows to store
all components in one object and share it across multiple environments. For example, it is now much easier
to share theme between application and Storybook:
import { MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
components: {
Tabs: {
defaultProps: { color: 'red' },
classNames: { root: 'tabs-root' },
styles: (theme) => ({
tab: {
'&[data-active]': { backgroundColor: theme.colors.red[5] },
},
}),
},
},
}}
>
<App />
</MantineProvider>
);
}
MantineProvider no longer supports emotionOptions
prop, instead you will need to create emotion cache on your side and provide it with emotionCache
prop.
This change was made to enable custom cache to be used during ssr and support more options for emotion
usage, for example with shadow dom or with iframe.
import { MantineProvider, createEmotionCache } from '@mantine/core';
const myCache = createEmotionCache({ key: 'mantine' });
function Demo() {
return (
<MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
<App />
</MantineProvider>
);
}
@emotion/react
and @emotion/server
packages are now not installed automatically (see related issue) –
you will need to install them manually:
yarn add @emotion/react @emotion/server
Most of components state were migrated to data-
attributes. This allows to override styles
more predictably without using !important
and reduces complexity of components Styles API.
You can use Input
and Input.Wrapper
Styles API
on MantineProvider to add styles to all Inputs.
Because of internal changes polymorphic components props types exported from @mantine/core
package are no longer generic types.
Now if you want to extend these types you need to provide associated element types on your side.
You can find updated polymorphic components guide here.
import type { ButtonProps } from '@mantine/core';
// Previously, no longer supported
type MyButtonProps = ButtonProps<'button'> & { label: string };
// Convert to
type MyButtonProps = ButtonProps & React.ComponentPropsWithoutRef<'button'> & { label: string };
use-form no longer exports formList
function, you can now
manage lists with just regular arrays. Other changes:
useForm
hook now supports clearInputErrorOnChange
option to disable error clearing when input value changes and validateInputOnChange
option that adds support for live fields validationform.onSubmit
handler now accepts second argument – a function that will be called with errors object when validation failsform.addListItem
was renamed to form.insertListItem
, it now supports inserting items add given indexonCreate
handlerposition
and zIndex
props – it is now required to add these styles to Portal childrensize="full"
, use size="100%"
insteadwithinPortal
if you need this featureheadless
variant, use unstyled
prop insteadfixed
prop is now true
by default@mantine/core
, use Checkbox.Group
, Radio.Group
and Chip.Group
components instead@mantine/hooks
package no longer exports old use-form
hook, use @mantine/form
package insteaddirection
prop, use Stack component instead for vertical stacksrule
parameteruseId
hook with a fallback for older React versions, generateId
function is no longer supported@mantine/hooks
package no longer exports useBooleanToggle
hook, use useDisclosure
hook insteadtransitionDuration
prop due to changes in use-focus-trap hook@mantine/notifications
package no longer has showNotification
, hideNotification
and other functions, use separate functions exported from the package for thatNew @mantine/carousel package based on embla carousel.
New @mantine/nprogress package displays navigation
progress bar at the top of the page, it can be easily integrated with Next.js and other similar
frameworks.
All Mantine components now support React 18, all known issues related to React 18 migration
were fixed:
children
prop changes)All components now support unstyled
prop which removes all non-essential Mantine styles
from the component. This is useful when you want to style some component from scratch
without overwriting any styles.
theme.activeStyles
lets you override styles added to buttons with :active
pseudo-classtheme.headings
now has an option to set fontWeight
for each heading individually:theme.defaultGradient
defines default gradient value for components that support variant="gradient"
(Button, ThemeIcon, etc.).theme.respectReduceMotion
allows to disregard user OS settings and play animations as usual:theme.cursorType
determines which cursor type will native controls have.pointer
then Checkbox,cursor: pointer
style.ScrollArea
with maxHeight
fullScreen
propInput.Wrapper
component under the hood (TextInput, Autocomplete, DatePicker, etc.) now support inputContainer
prop. This prop let you add additional elements before/after input element or add floating elements that will be positioned relative to the input. Example with Tooltip.inputWrapperOrder
prop allows to define the order of Input.Wrapper
parts.Input.Label
, Input.Error
and Input.Description
, that were previously the parts of InputWrapper
component. You can use these components to create custom form layouts if default Input.Wrapper
layout does not fit your requirements.withBorder
prop will add top and bottom border to Card.Section
depending on its position relative to other content and sections; inheritPadding
prop will add the same left and right padding to Card.Section
as set in Card
componentthumbSize
prop to configure thumbs width and height from prop.withinPortal
proptransitionDuration
propref
propcolor
propsize
prop to set size in pxoverlayBlur
propHome
and End
keysradius
propmodalProps
to spread props to inner Modal componentsize
prop is not settype="never"
to hide scrollbarsBox
Published by rtivital over 2 years ago
hold
is set to true in NumberInput component (#1725)Published by rtivital over 2 years ago
type="auto"
leaving space for bottom horizontal scrollbar in ScrollArea component (#1654)weekendDays
prop handling in DatePicker and Calendar componentsinput[type="search"]
use-list-state
hook (#1678)