@mantine/hooks 3.4.0

on Node.js Yarn

View changelog with demos on Mantine website

@mantine/dates improvements

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:

• All @mantine/dates components that use Calendar no longer support withSelect and yearsRange props
• Styles API names were changed to include new calendar header

New hooks

• use-page-leave hook calls given function when mouse leaves page
• use-input-state hook lets you handle state of native inputs (with event in onChange 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} />
    </>
  );
}

New features

• Select, MultiSelect and Autocomplete components now support forcing dropdown position.
• Highligh component now supports changing highlight styles.
• Card.Section component now supports changing root element.
• Popover component now supports width prop to set popover body width without Styles API
• Modal component now supports radius prop
• Modals manager now supports onClose prop for all modals, callback is called when modal is closed no matter the reason