Functions reference

Functions reference (함수 레퍼런스)

Mantine 패키지에서 내보내지지만 다른 곳에서 문서화되지 않은 함수들의 목록이에요. 유틸리티 함수 하나씩 동작과 예시를 설명해 드릴게요.

출처: 문서

본문

clamp

clamp 함수는 @mantine/hooks에서 내보내져요. 숫자를 포함하는 하한/상한 경계 안으로 조정해요:

import { clamp } from '@mantine/hooks';

// With both min and max boundaries
clamp(10, 0, 5); // 5
clamp(100, 0, 5); // 5
clamp(-100, 0, 5); // 0

// With only min boundary
clamp(10, 0, undefined); // 10
clamp(-100, 0, undefined); // 0

// With only max boundary
clamp(0, undefined, 5); // 0
clamp(10, undefined, 5); // 5

lowerFirst

lowerFirst 함수는 @mantine/hooks에서 내보내져요. 문자열의 첫 글자를 소문자로 변환해요:

import { lowerFirst } from '@mantine/hooks';

lowerFirst('Mantine'); // mantine
lowerFirst('mantine'); // mantine

upperFirst

upperFirst 함수는 @mantine/hooks에서 내보내져요. 문자열의 첫 글자를 대문자로 변환해요:

import { upperFirst } from '@mantine/hooks';

upperFirst('Mantine'); // Mantine
upperFirst('mantine'); // Mantine

randomId

randomId 함수는 @mantine/hooks에서 내보내져요. mantine- 접두어가 붙은 무작위 id를 생성해요:

import { randomId } from '@mantine/hooks';

randomId(); // mantine-d7h137oav
randomId(); // mantine-1q2j3j4j5

range

range 함수는 @mantine/hooks에서 내보내져요. start부터 end(포함)까지의 숫자 배열을 생성해요:

import { range } from '@mantine/hooks';

range(0, 5); // [0, 1, 2, 3, 4, 5]
range(5, 0); // [5, 4, 3, 2, 1, 0]

shallowEqual

shallowEqual 함수는 @mantine/hooks에서 내보내져요. 두 객체의 얕은 동등(shallow equality) 검사를 수행해요:

import { shallowEqual } from '@mantine/hooks';

shallowEqual({ a: 1 }, { a: 1 }); // true
shallowEqual({ a: 1 }, { a: 2 }); // false

keys

keys 함수는 @mantine/core에서 내보내져요. Object.keys의 타입 안전 래퍼로, string[] 대신 (keyof T)[]로 타입된 키 배열을 반환해요:

import { keys } from '@mantine/core';

const data = { name: 'Mantine', age: 4 };
const result = keys(data); // ('name' | 'age')[]

deepMerge

deepMerge 함수는 @mantine/core에서 내보내져요. 소스 객체의 속성을 대상 객체로 재귀적으로 병합해요. 배열은 병합되지 않고 소스 값으로 완전히 교체돼요:

import { deepMerge } from '@mantine/core';

deepMerge({ a: 1, b: { c: 2 } }, { b: { d: 3 } });
// { a: 1, b: { c: 2, d: 3 } }

deepMerge({ a: 1 }, { a: 2, b: 3 });
// { a: 2, b: 3 }

filterProps

filterProps 함수는 @mantine/core에서 내보내져요. 주어진 객체에서 모든 undefined 속성을 제거해요:

import { filterProps } from '@mantine/core';

filterProps({ a: 1, b: undefined, c: 'hello' });
// { a: 1, c: 'hello' }

isElement

isElement 함수는 @mantine/core에서 내보내져요. 값이 React 요소인지 확인하는 타입 가드예요. 배열, null, React Fragment에 대해서는 false를 반환해요:

import { isElement } from '@mantine/core';

isElement(<div />); // true
isElement('string'); // false
isElement(null); // false
isElement(<></>); // false

isNumberLike

isNumberLike 함수는 @mantine/core에서 내보내져요. 값이 숫자이거나 CSS 숫자 값(calc(), var(), CSS 단위 포함)을 나타내는 문자열인지 확인해요:

import { isNumberLike } from '@mantine/core';

isNumberLike(10); // true
isNumberLike('10px'); // true
isNumberLike('1.5rem'); // true
isNumberLike('calc(100% - 10px)'); // true
isNumberLike('var(--size)'); // true
isNumberLike('hello'); // false

camelToKebabCase

camelToKebabCase 함수는 @mantine/core에서 내보내져요. camelCase 문자열을 kebab-case로 변환해요:

import { camelToKebabCase } from '@mantine/core';

camelToKebabCase('backgroundColor'); // 'background-color'
camelToKebabCase('fontSize'); // 'font-size'
camelToKebabCase('color'); // 'color'

getDefaultZIndex

getDefaultZIndex 함수는 @mantine/core에서 내보내져요. 주어진 elevation 레벨에 대한 기본 z-index 값을 반환해요:

import { getDefaultZIndex } from '@mantine/core';

getDefaultZIndex('app'); // 100
getDefaultZIndex('modal'); // 200
getDefaultZIndex('popover'); // 300
getDefaultZIndex('overlay'); // 400
getDefaultZIndex('max'); // 9999

closeOnEscape

closeOnEscape 함수는 @mantine/core에서 내보내져요. Escape 키가 눌렸을 때 주어진 콜백을 호출하는 키보드 이벤트 핸들러를 만들어요:

import { closeOnEscape } from '@mantine/core';

// Basic usage
<div onKeyDown={closeOnEscape(() => setOpened(false))} />;

// With options
<div
  onKeyDown={closeOnEscape(() => setOpened(false), {
    active: isOpened,
    onTrigger: () => console.log('closed'),
  })}
/>;

noop

noop 함수는 @mantine/core에서 내보내져요. 아무것도 하지 않는 no-operation 함수예요. 기본 콜백으로 유용해요:

import { noop } from '@mantine/core';

const onClick = handler || noop;

findClosestNumber

findClosestNumber 함수는 @mantine/core에서 내보내져요. 주어진 배열에서 제공된 값에 가장 가까운 숫자를 찾아요. 배열이 비어 있으면 값 자체를 반환해요:

import { findClosestNumber } from '@mantine/core';

findClosestNumber(3, [1, 5, 10]); // 1
findClosestNumber(7, [1, 5, 10]); // 5
findClosestNumber(9, [1, 5, 10]); // 10
findClosestNumber(5, []); // 5

toDateString

toDateString 함수는 @mantine/dates에서 내보내져요. 날짜 값을 YYYY-MM-DD 문자열로 변환해요. Date, string, number, dayjs 객체를 받아요. 입력이 null이나 undefined면 null 또는 undefined를 반환해요:

import { toDateString } from '@mantine/dates';

toDateString(new Date(2025, 0, 15)); // '2025-01-15'
toDateString('2025-01-15 14:30:00'); // '2025-01-15'
toDateString(null); // null
toDateString(undefined); // undefined

toDateTimeString

toDateTimeString 함수는 @mantine/dates에서 내보내져요. 날짜 값을 YYYY-MM-DD HH:mm:ss 문자열로 변환해요. Date, string, number, dayjs 객체를 받아요. 입력이 null이나 undefined면 null 또는 undefined를 반환해요:

import { toDateTimeString } from '@mantine/dates';

toDateTimeString(new Date(2025, 0, 15, 14, 30, 0)); // '2025-01-15 14:30:00'
toDateTimeString('2025-01-15'); // '2025-01-15 00:00:00'
toDateTimeString(null); // null

assignTime

assignTime 함수는 @mantine/dates에서 내보내져요. HH:mm:ss 형식의 시간 문자열을 날짜 값에 할당해 YYYY-MM-DD HH:mm:ss 문자열을 반환해요. 날짜 값이 null이면 현재 날짜를 사용해요:

import { assignTime } from '@mantine/dates';

assignTime('2025-01-15', '14:30:00'); // '2025-01-15 14:30:00'
assignTime('2025-01-15 08:00:00', '20:15:30'); // '2025-01-15 20:15:30'
assignTime(null, '10:00:00'); // '[current date] 10:00:00'

clampDate

clampDate 함수는 @mantine/dates에서 내보내져요. 선택적 min과 max 경계 사이로 날짜를 조정해 YYYY-MM-DD HH:mm:ss 문자열을 반환해요:

import { clampDate } from '@mantine/dates';

clampDate('2025-01-01', '2025-12-31', '2025-06-15');
// '2025-06-15 00:00:00' – within range

clampDate('2025-01-01', '2025-12-31', '2024-06-15');
// '2025-01-01 00:00:00' – clamped to min

clampDate('2025-01-01', '2025-12-31', '2026-06-15');
// '2025-12-31 00:00:00' – clamped to max

clampDate(undefined, undefined, '2025-06-15');
// '2025-06-15 00:00:00' – no boundaries

더 알아보기 (Learn more)

• Getting started — 시작하기