A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
Fix incorrectly memoized onChange function in Pagination component
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
allowSingleDateInRange
prop in RangeCalendar and DateRangePicker componentsPublished by rtivital almost 3 years ago
Published by rtivital almost 3 years ago
Add option to disable closing on click outside in Modal component with closeOnClickOutside={false}
prop
Published 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 website
styles
object and does not hide child element by default.mantine-text-input-root
, now .mantine-TextInput-root
)You can now set emotion cache options via MantineProvider:
<MantineProvider emotionOptions={{ key: "mantine", prepend: false }}>
<App />
</MantineProvider>
With these options you can change styles insertion point (from 3.1 styles are prepended to head)
and configure stylis plugins. For example, you can use stylis-plugin-rtl to add rtl support:
import { MantineProvider } from "@mantine/core";
import rtlPlugin from "stylis-plugin-rtl";
function Demo() {
return (
<MantineProvider
emotionOptions={{ key: "mantine", stylisPlugins: [rtlPlugin] }}
>
<App />
</MantineProvider>
);
}
You can now add styles to components with MantineProvider.
Styles will be added to every matching component rendered inside MantineProvider:
import { MantineProvider, Button, Badge } from "@mantine/core";
function Demo() {
return (
<MantineProvider
styles={{
Button: (theme) => ({
// Shared button styles are applied to all buttons
root: { height: 42, padding: "0 30px" },
// These styles are applied only to buttons with outline variant
outline: {
// You can use any selectors inside (the same way as in createStyles function)
"&:hover": {
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[8]
: theme.colors.gray[0],
},
},
}),
// Use raw styles object if you do not need theme dependency
Badge: {
dot: {
borderWidth: 2,
},
},
}}
>
<Button variant="outline">Outline button</Button>
<Button variant="filled">Filled button</Button>
<Badge variant="dot">Dot badge</Badge>
</MantineProvider>
);
}
styles
prop will no longer add inline styles, instead styles will be converted to emotion format.
This means that you now can subscribe to theme
and use nested selectors in styles
:
<Button
styles={(theme) => ({
outline: {
"&:hover": {
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[8]
: theme.colors.dark[0],
},
},
root: {
height: 56,
},
})}
>
My custom button
</Button>
All components now support sx
prop. You can add styles to root element and subscribe to theme with it:
<Button
sx={(theme) => ({
borderColor: theme.colors.blue[9],
"&:hover": {
backgroundColor: theme.colors.blue[7],
},
})}
>
Button with sx styles
</Button>
New use-css hook is a simpler alternative to createStyles
function.
Hook returns css
and cx
functions. css
function accepts styles object and returns class name:
import { useCss, Button } from "@mantine/core";
function Demo({ active }) {
const { css, cx } = useCss();
return (
<Button
className={cx(css({ backgroundColor: "red", opacity: 1 }), {
[css({ opacity: 1 })]: active,
})}
>
Custom button
</Button>
);
}
New AppShell component allows you create responsive app shell with fixed or static position:
With Skeleton component you can create placeholders to indicate loading state:
<Skeleton height={50} circle mb="xl" />
<Skeleton height={8} radius="xl" />
<Skeleton height={8} mt={6} radius="xl" />
<Skeleton height={8} mt={6} width="70%" radius="xl" />
New use-scroll-into-view hook lets you scroll given node into view within scrollable container or body element:
import { useScrollIntoView } from '@mantine/hooks';
import { Button, Paper } from '@mantine/core';
function Demo() {
const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView();
return (
<>
<Paper ref={scrollableRef} style={{ overflowY: 'scroll', height: 300, flex: 1 }}>
<Paper ref={targetRef}>Scroll me into view<</Paper>
</Paper>
<Button onClick={() => scrollIntoView()}>Scroll to target</Button>
</>
);
}
Box component allows you to utilize new sx
prop to style any component or element:
<Box
sx={(theme) => ({
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[6]
: theme.colors.gray[0],
textAlign: "center",
padding: theme.spacing.xl,
borderRadius: theme.radius.md,
cursor: "pointer",
"&:hover": {
backgroundColor:
theme.colorScheme === "dark"
? theme.colors.dark[5]
: theme.colors.gray[1],
},
})}
>
Box lets you add inline styles with sx prop
</Box>
applyWhere
handlervalues
on validation ruletotal
prop to explicitly override the truncated length.onDropdownOpen
and onDropdownClose
handlers support to Select, MultiSelect and Autocomplete components@mantine/next
packagePublished by rtivital about 3 years ago
Published by rtivital about 3 years ago
onClose
when close button is clickedPublished by rtivital about 3 years ago
Published by rtivital about 3 years ago
pop
transition to Transition componentpop
Published by rtivital about 3 years ago
Fix incorrectly defined types for Dialog, Tab and CloseButton components
Published by rtivital about 3 years ago
View changelog with demos on Mantine website
@mantine/core
package no longer exports react-jss theming
context, use createStyles insteadthemeOverride
prop due to performance reasonselementRef
prop was replaced with ref
in all componentstheme.lineHeight
) was increased from 1.4 to 1.55margins
prop, use mx
or my
insteadcreateStyles
function now returns an object of { classes, cx }
instead of just classes
Mantine no longer uses react-jss, all components were migrated to emotion based css-in-js library
exposed as separate @mantine/styles
package and as a part of @mantine/core
. This means that you will have to:
createStyles
hook creatorRead createStyles documentation
From version 3.0 createStyles is the main way to add styles to Mantine components. Core features:
createStyles
extends @emotion/react
Basic createStyles
usage example:
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme, _params, getRef) => {
const child = getRef('child');
return {
wrapper: {
// subscribe to color scheme changes right in your styles
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
maxWidth: 400,
width: '100%',
height: 180,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: theme.radius.sm,
// Dynamic media queries, define breakpoints in theme, use anywhere
[`@media (max-width: ${theme.breakpoints.sm}px)`]: {
// Type safe child reference in nested selectors via ref
[`& .${child}`]: {
fontSize: theme.fontSizes.xs,
},
},
},
child: {
// assign ref to element
ref: child,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
padding: theme.spacing.md,
borderRadius: theme.radius.sm,
boxShadow: theme.shadows.md,
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},
};
});
function Demo() {
const { classes } = useStyles();
return (
<div className={classes.wrapper}>
<div className={classes.child}>createStyles demo</div>
</div>
);
}
Since Mantine now uses emotion instead of react-jss you will need to change server side rendering strategy.
Mantine now has 3 new packages to help you setup server side rendering:
@mantine/ssr
– general server side rendering utilities@mantine/next
– Next.js specific ssr configurationsgatsby-plugin-mantine
– enable ssr in GatsbyFollow these guides to get started with ssr:
All components that previously used elementRef
were rebuilt with React.forwardRef
, use ref
prop to access element ref:
<TextInput ref={(node) => {}} />
It's no longer required to set static ids on Grid, Menu, all inputs and some other components
if you wrap your application in MantineProvider.
<TextInput /> // -> will render fine during ssr
<TextInput id="not-necessary" /> // -> id is no longer necessary
ColorSchemeProvider
is a new component that will help you manage color scheme (read full docs):
import { MantineProvider, ColorSchemeProvider, ColorScheme } from '@mantine/core';
export default function Demo() {
const [colorScheme, setColorScheme] = useState('light');
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
return (
<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
<MantineProvider theme={{ colorScheme }}>
<App />
</MantineProvider>
</ColorSchemeProvider>
);
}
// ...later in other component
import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';
function Demo() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
return (
<ActionIcon
variant="outline"
color={dark ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
>
{dark ? (
<SunIcon style={{ width: 18, height: 18 }} />
) : (
<MoonIcon style={{ width: 18, height: 18 }} />
)}
</ActionIcon>
);
}
All components now support setting following props to control margins:
m
– sets margin
property on root elementmy
– sets margin-top
and margin-bottom
properties on root elementmx
– sets margin-right
and margin-left
properties on root elementmt
– sets margin-top
property on root elementmb
– sets margin-bottom
property on root elementml
– sets margin-left
property on root elementmr
– sets margin-right
property on root elementimport { Button, TextInput } from '@mantine/core';
function Demo() {
return (
<div>
<Button mx={20}>My button</Button>
<TextInput mt="md" />
</div>
);
}
@mantine/dropzone is a new package that includes Dropzone and FullScreenDropzone components.
Select and MultiSelect components now support creating new items, items grouping and disabling
Accordion component now supports more options to customize icons and labels:
iconPosition
prop let's you choose where chevron icon will be rendered: right or lefticon
prop on Accordion and Accordion.Item components you can replace icons of all items at once or of each item individuallydefault
varianttheme.breakpoints
usage in breakpoints
propradius
propPublished by rtivital about 3 years ago
Published by rtivital about 3 years ago
View changelog with demos on Mantine website
All @mantine/
packages will no longer default to umd builds via browser
field in package.json
.
This change will simplify tree shacking for Webpack and should not affect your Next.js, Gatsby, Vite or CRA applications.
All @mantine/
packages no longer require react-jss installation as peer dependency – it will be installed automatically as @mantine/core dependency.
Instead of direct react-jss usage @mantine/core now exports createStyles function
and a set of components to implement server side rendering.
New createStyles
function lets you create styles with Mantine theme:
import { createStyles } from '@mantine/core';
const useStyles = createStyles((theme) => ({
button: {
backgroundColor: theme.colors.blue[6],
color: theme.white,
padding: [theme.spacing.md, theme.spacing.lg],
},
}));
function Demo() {
const classes = useStyles();
return <button className={classes.button}>My button</button>;
}
Note that it will only work if your application is wrapped with MantineProvider.
@mantine/core package now comes with components to simplify server side rendering setup with Next.js and any other environment.
Checkout Next.js guide to learn more.
@mantine/rte is a new package with RichTextEditor component.
Component integrates seamlessly with your MantineTheme and provides all basic rich text editing features:
Timeline component lets you show list of events in chronological order:
Navigate between multiple pages with new Pagination component (built by @EmilMalanczak):
Chips component is an inline alternative to RadioGroup and MultiSelect components:
List component is a wrapper for ul and ol lists with option to replace bullets with icons:
TimeRangeInput component allows to capture time range from user (built by @achmurali):
white
variantinherit
propwithBorder
prop to add 1px borderloading
state (same as in Button component)<SegmentedControl data={['React', 'Angular', 'Svelte', 'Vue']} />
(built by @cstrat)Published by rtivital about 3 years ago
Fix ColorPicker and ColorInput losing hue value when color changes
Published by rtivital about 3 years ago