A fully featured React components library
MIT License
Bot releases are hidden (Show)
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
target
in Modal and Drawer components to render Portal in specified nodePublished by rtivital almost 3 years ago
Fix incorrect position calculation for SegmentedControl when scale transform is applied to parent node (#585)
Published by rtivital almost 3 years ago
Fix incorrect focus management in DatePicker which resulted in closing dropdown when anything inside was clicked
Published by rtivital almost 3 years ago
View changelog with demos on Mantine docs website
Stepper.Completed
to display content after final step is completedradius
propcomponent
propCol
component as Grid.Col
theme.colors
closeOnEscape={false}
@mantine/core
package now exports MantineProviderProps
type@mantine/hooks
package now exports UseForm
typeanimateOpacity
prop set to falsesize
propsize
prop not applied to Divider with labelonChange
function called with incorrect precision in NumberInput componentlargerThan
and smallerThan
props handling (breaking bug fix)Published by rtivital almost 3 years ago
largerThan
and smallerThan
props handling (breaking bug fix)Published by rtivital almost 3 years ago
Add UseForm
type exports from @mantine/hooks
Published by rtivital almost 3 years ago
@mantine/modals
modal closing logiconChange
function called with incorrect precision in NumberInput component (#516)Published by rtivital almost 3 years ago
View changelog with demos on Mantine website
Calendar component was rebuilt to improved date picking experience.
Now user can change level by clicking label between next and previous controls:
This change is applied to all components that use Calendar: DatePicker, DateRangePicker and RangeCalendar.
There are several breaking changes associated with this improvement:
withSelect
and yearsRange
propsonChange
handler) and custom inputs (with value in onChange
handler):import { useInputState } from '@mantine/hooks';
import { TextInput, NumberInput } from '@mantine/core';
function Demo() {
const [stringValue, setStringValue] = useInputState('');
const [numberValue, setNumberValue] = useInputState(0);
return (
<>
<input type="text" value={stringValue} onChange={setStringValue} />
<TextInput value={stringValue} onChange={setStringValue} />
<NumberInput value={numberValue} onChange={setNumberValue} />
</>
);
}
width
prop to set popover body width without Styles APIradius
proponClose
prop for all modals, callback is called when modal is closed no matter the reasonPublished by rtivital almost 3 years ago
injectStylesIntoStaticMarkup
function to @mantine/ssr package for server side rendering with remixPublished by rtivital almost 3 years ago
onChange
type in getInputProps
handlerPublished by rtivital almost 3 years ago
filter
functiononChange
function produced by use-form
getInputProps
functionPublished by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
View changelog with demos on Mantine website
getInputProps
handler to simplify inputs:import { TextInput, Checkbox, Button } from '@mantine/core';
import { useForm } from '@mantine/hooks';
export function Demo() {
const form = useForm({
initialValues: {
email: '',
termsOfService: false,
},
validationRules: {
email: (value) => /^\S+@\S+$/.test(value),
},
});
return (
<form onSubmit={form.onSubmit((values) => console.log(values))}>
<TextInput
required
label="Email"
placeholder="[email protected]"
{...form.getInputProps('email')}
/>
<Checkbox
mt="md"
label="I agree to sell my privacy to this corporation"
{...form.getInputProps('termsOfService', { type: 'checkbox' })}
/>
<Button type="submit">Submit</Button>
</form>
);
}
const form = useForm({
initialValues: { name: '', age: 0 },
validationRules: {
name: (value) => value.trim().length >= 2,
age: (value) => value > 21,
},
errorMessages: {
name: 'Name must include at least 2 characters',
age: 'You must be 21 or older to enter',
},
});
form.validate();
form.errors;
// -> { name: 'Name must include at least 2 characters', age: 'You must be 21 or older to enter' }
form.setFieldValue('name', 'John');
form.validate();
form.errors;
// -> { name: null, age: 'You must be 21 or older to enter' }
useAccordionState
hookwithinPortal={false}
. This option is useful when you want to use Select and other components inside Popover or other components that use use-click-outside.iconSize
and offsetIcon
props@mantine/dates
components with dateLocale
on MantineProvider
transitionDuration={0}
display: inline-block
styles, these styles will prevent input focusing when empty area above the input is clickedPublished by rtivital almost 3 years ago
other
field type on MantineProvider themePublished by rtivital almost 3 years ago
zIndex
prop support to Select, Autocomplete and MultiSelect components (#448)Published by rtivital almost 3 years ago
Fix dark theme styles on TransferList component
Published by rtivital almost 3 years ago
View changelog with demos on Mantine website
withGutter
prop is not longer supported.link
variant due to Styles API limitations, use Anchor component instead.@mantine/core
package no longer exports getFontStyles
, getFocusStyles
and hexToRgba
functions, replace them with theme functions: theme.fn.fontStyles()
, theme.fn.focusStyles()
, theme.fn.rgba()
.width
is set was changedMantineProvider now supports adding global styles and normalize.css
with props:
<MantineProvider withGlobalStyles withNormalizeCSS>
<App />
</MantineProvider>
Mantine theme now adds several functions (full list) that can help you
write styles in createStyles
function, styles
and sx
props:
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
myResponsiveText: {
fontSize: theme.fontSizes.md,
[theme.fn.smallerThan('sm')]: {
fontSize: theme.fontSizes.sm,
},
[theme.fn.smallerThan(500)]: {
fontSize: theme.fontSizes.xs,
},
},
}));
function MyResponsiveText() {
const { classes } = useStyles();
return <div className={classes.myResponsiveText}>My responsive text</div>;
}
You can now add any amount of custom properties on Mantine theme using other
key:
// Add any other properties on theme
<MantineProvider
theme={{
other: {
fontFamilySecondary: 'Arial',
lineHeights: [1.2, 1.4, 1.6, 1.8, 1.95],
reduceMotion: true,
},
}}
>
<App />
</MantineProvider>
// Then use your custom properties
<Box sx={(theme) => ({
fontFamily: theme.other.fontFamilySecondary,
lineHeight: theme.other.lineHeight[2],
transitionDuration: theme.other.reduceMotion ? '0ms' : '200ms',
})} />
All layout components now support mobile first approach:
minWidth
breakpoints (cols
prop is no longer required):<SimpleGrid
breakpoints={[
{ minWidth: 'sm', cols: 2 },
{ minWidth: 'md', cols: 3 },
{ minWidth: 1200, cols: 4 },
]}
>
<div>1</div>
<div>2</div>
<div>3</div>
</SimpleGrid>
// old way
<Navbar width={{ base: 400, breakpoints: { sm: '100%', lg: 500 } }} />
// new way (mobile first), base width defaults to 100%
<Navbar width={{ sm: 400, lg: 500 }} />
New @mantine/modals package is similar to @mantine/notification but for modals.
It includes modals manager that allows you to:
import { Button, Text } from '@mantine/core';
import { useModals } from '@mantine/modals';
function Demo() {
const modals = useModals();
const openDeleteModal = () =>
modals.openConfirmModal({
title: 'Delete your profile',
children: (
<Text size="sm">
Are you sure you want to delete your profile? This action is destructive and you will have
to contact support to restore your data.
</Text>
),
labels: { confirm: 'Delete account', cancel: "No don't delete it" },
confirmProps: { color: 'red' },
onCancel: () => console.log('Cancel'),
onConfirm: () => console.log('Confirmed'),
});
return <Button onClick={openDeleteModal} color="red">Delete account</Button>;
}
New Stepper component:
New TransferList component:
With new use-os hook you can detect user os:
import { useOs } from '@mantine/hooks';
function Demo() {
const os = useOs();
return <>Your os is <b>{os}</b></>;
}
New use-set-state lets you work with state like in class components:
const [state, setState] = useSetState({ name: 'John', age: 35, job: 'Engineer' });
state; // -> { name: 'John', age: 35, job: 'Engineer' }
setState({ name: 'Jane' }); // -> { name: 'Jane', age: 35, job: 'Engineer' }
setState({ age: 25, job: 'Manager' }); // -> { name: 'Jane', age: 25, job: 'Manager' }
setState((current) => ({ age: current.age + 7 })); // -> { name: 'Jane', age: 32, job: 'Manager' }
offsetXs={5}
, offsetMd={10}
, etc.pop
and shift
handlersmergeRefs
function, it supports refs merging for dynamic listsonScrubStart
and onScrubEnd
callbacks