A fully featured React components library
MIT License
Bot releases are visible (Hide)
Published by rtivital about 3 years ago
// Loader component will render bars
<MantineProvider theme={{ loader: 'bars' }}>
<YourApp />
</MantineProvider>
Published by rtivital about 3 years ago
View all demos on Mantine website
Alert component was redesigned, it now supports icon and close button:
Blockquote component was redesigned to look more neutral:
SimpleGrid component allows you to create responsive grid with equal width columns:
<SimpleGrid cols={3}>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</SimpleGrid>
Collapse component allows you to animate presence with slide down transition
import { useState } from 'react';
import { Button, Collapse } from '@mantine/core';
function Demo() {
const [opened, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen((o) => !o)}>
Toggle content
</Button>
<Collapse in={opened}>
{/* content... */}
</Collapse>
</>
);
}
Col
component props (built by @everek):import React from 'react';
import { Grid, Col } from '@mantine/core';
function Demo() {
return (
<Grid>
<Col span={12} md={6} lg={3}>1</Col>
<Col span={12} md={6} lg={3}>2</Col>
<Col span={12} md={6} lg={3}>3</Col>
<Col span={12} md={6} lg={3}>4</Col>
</Grid>
);
}
inline
prop to center inline elementscomponent
propdimmed
color and inline
prop to set line-height to 1component
prop (Button, ActionIcon, etc.) now have better TypeScript supportonSearchChange
event which allows to change data based on search query<Menu.Item />
instead of separate <MenuItem />
importPublished by rtivital about 3 years ago
Fix ColorInput behavior when used inside Modal and Drawer (#222)
Published by rtivital about 3 years ago
closeOnItemClick
prop handling in Menu component #213Published by rtivital about 3 years ago
Dark theme colors were adjusted in all components to have better contrast, overall all theme.colors.dark
colors are darker now.
Components that use any kind of overlay are now powered by popper.js. Full list of components that were migrated:
withGutter
prop to add spacing to all sides of group (built by @achmurali)box-sizing: border-box
on all elementsPublished by rtivital about 3 years ago
Fix definitions for Title component #207
Published by rtivital about 3 years ago
Fix incorrect jss rule in Progress component #205
Published by rtivital about 3 years ago
Published by rtivital about 3 years ago
['React', 'Angular', 'Vue']
(built by @cstrat)compact
prop – it reduces height and horizontal padding if appliedPublished by rtivital about 3 years ago
Fix TypeScript definitions to work with strict mode (strict null checks) in following hooks:
Published by rtivital about 3 years ago
className
passthrough in DatePicker and DateRangePicker componentsgrow
prop in Group component – now when grow
prop set to true items will always take equal amount of space and will never wrap to next linePublished by rtivital over 3 years ago
Published by rtivital over 3 years ago
This release is almost fully built by Mantine community, lots of thanks for these awesome people who contributed these features!
Built by @steschwa
use-hotkeys hook allows you to subscribe to multiple hotkeys with single hook (document element) or function (any other element)
import { useHotkeys } from '@mantine/hooks';
function Demo() {
// ctrl + J and ⌘ + J to toggle color scheme
// ctrl + K and ⌘ + K to search
useHotkeys([
['mod+J', () => toggleColorScheme()],
['ctrl+K', () => search()],
['alt+mod+shift+X', () => rickRoll()],
]);
return null;
}
Built by @kosciolek
use-intersection hook allows you to get information about intersection of given element with its scroll container or document.body
import { useIntersection } from '@mantine/hooks';
import { Paper, Text, useMantineTheme } from '@mantine/core';
function Demo() {
const containerRef = useRef();
const theme = useMantineTheme();
const [ref, observer] = useIntersection({
root: containerRef.current,
threshold: 1,
});
return (
<Paper elementRef={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
<div style={{ paddingTop: 260, paddingBottom: 280 }}>
<Paper
elementRef={ref}
padding="xl"
style={{
backgroundColor: observer?.isIntersecting ? theme.colors.green[9] : theme.colors.red[9],
minWidth: '50%',
}}
>
<Text style={{ color: theme.white }} weight={700}>
{observer?.isIntersecting ? 'Fully visible' : 'Obscured'}
</Text>
</Paper>
</div>
</Paper>
);
}
Built by @ghana7989
Get and set hash in url with use-hash hook:
import { useHash, randomId } from '@mantine/hooks';
import { Button } from '@mantine/core';
export function Demo() {
const [hash, setHash] = useHash();
return <Button onClick={() => setHash(randomId())}>Set hash to random string</Button>
}
Built by @yoroshikun
Highlight component now supports:
// Highlight all 3 "this" substrings
<Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>
// Highlights both "this" and "that" substrings
<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>
Built by @wyze
Tabs component now supports vertical orientation:
Published by rtivital over 3 years ago
Value can no longer be changed in internal state of controlled components built with use-uncontrolled hook #157 (thanks to @Kukkimonsuta for reporting and fixing the issue)
Published by rtivital over 3 years ago
Published by rtivital over 3 years ago
Published by rtivital over 3 years ago