@mantine/hooks 2.4.0 on Node.js Yarn

Release demos

Components redesign

Alert component was redesigned, it now supports icon and close button:

Blockquote component was redesigned to look more neutral:

New components

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>
    </>
  );
}

New features

Grid component now supports setting breakpoints via 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>
  );
}

Text, Button, Badge and ThemeIcon components now support new gradient variant:

Button component now supports loading state
Text component now supports setting -webkit-line-clampvia prop to limit amount of lines
Center component now supports inline prop to center inline elements
Initial highlighted item in Menu component no longer set on menu open – user will have to use up or down arrow at least one to make selection visible
Card, Paper and Avatar components now support setting custom component as root element via component prop
Text component now supports special dimmed color and inline prop to set line-height to 1
Select, Autocomplete and MultiSelect dropdowns are closed when input is clicked (built by @achmurali)
Components that support changing root element with component prop (Button, ActionIcon, etc.) now have better TypeScript support
Loader component now supports 2 new variants
Select component now supports onSearchChange event which allows to change data based on search query
Indeterminate and checked icons were replaced in Checkbox to make component more recognizable
Menu, Accordion and Card components now support simpler imports, e.g. <Menu.Item /> instead of separate <MenuItem /> import
NativeSelect, Select and MultiSelect components now support icon in right section changing
Modal and Drawer components now return focus to last active element after being closed
Overlay component now supports setting gradient instead of background color

Project changes

Mantine website has now better search built with Autocomplete component (built by @achmurali)
Changelog entries are now organized by versions instead of single page