Highlight
Highlight (텍스트 하이라이트)
Highlight 컴포넌트는 텍스트 안에서 주어진 부분을 HTML mark 요소로 하이라이트하는 컴포넌트예요. 폴리모픽 컴포넌트이며 Text를 기반으로 해요.
출처: 문서
본문
텍스트 안의 부분 문자열을 하이라이트하려면 Highlight 컴포넌트를 사용해요. HTML mark 요소를 이용해요.
텍스트를 children으로 전달하고, highlight prop으로 하이라이트할 부분 문자열을 지정해요. 기본적으로 대소문자 구분 없이, 악센트 구분 없이 매칭하며, 매칭된 모든 위치를 하이라이트해요. caseInsensitive와 accentInsensitive prop으로 이 동작을 끌 수 있어요.
import { Highlight } from '@mantine/core';
function Demo() {
return (
<Highlight highlight="this">
Highlight This, definitely THIS and also this!
</Highlight>
);
}
매칭 동작
- 대소문자 구분 없음:
'hello'는'Hello','HELLO','hElLo'등과 매칭돼요(caseInsensitive로 제어, 기본값true) - 악센트 구분 없음:
'cafe'는'café','cafè','CAFÉ'등과 매칭돼요(accentInsensitive로 제어, 기본값true) - 모든 위치: 매칭된 부분 문자열의 모든 인스턴스가 하이라이트돼요
- 특수 문자:
[,],(,)같은 정규식 특수 문자가 자동으로 이스케이프되어 리터럴 텍스트로 처리돼요 - 공백: 하이라이트 문자열 앞뒤의 공백은 잘라내고 무시해요
- 빈 문자열: 빈 문자열이나 공백만 있는 하이라이트 문자열은 무시돼요
대소문자 구분 매칭
caseInsensitive={false}를 설정하면 하이라이트 용어와 대소문자가 같은 부분 문자열만 매칭돼요.
import { Highlight, Stack, Text } from '@mantine/core';
function Demo() {
return (
<Stack gap="md">
<div>
<Text size="sm" fw={500} mb={5}>
With case-insensitive matching (default)
</Text>
<Highlight highlight="this">Highlight This, definitely THIS and also this!</Highlight>
</div>
<div>
<Text size="sm" fw={500} mb={5}>
{'With case-sensitive matching (caseInsensitive={false})'}
</Text>
<Highlight highlight="this" caseInsensitive={false}>
Highlight This, definitely THIS and also this!
</Highlight>
</div>
</Stack>
);
}
악센트 구분 매칭
accentInsensitive={false}를 설정하면 텍스트의 악센트가 하이라이트 용어와 정확히 일치해야 해요.
import { Highlight, Stack, Text } from '@mantine/core';
function Demo() {
return (
<Stack gap="md">
<div>
<Text size="sm" fw={500} mb={5}>
With accent-insensitive matching (default)
</Text>
<Highlight highlight="cafe">We visited café and cafe.</Highlight>
</div>
<div>
<Text size="sm" fw={500} mb={5}>
{'With accent-sensitive matching (accentInsensitive={false})'}
</Text>
<Highlight highlight="cafe" accentInsensitive={false}>
We visited café and cafe.
</Highlight>
</div>
</Stack>
);
}
여러 부분 문자열 하이라이트
여러 부분 문자열을 하이라이트하려면 값의 배열을 제공해요. 여러 개를 제공하면 부분 오버랩을 피하기 위해 더 긴 매치가 우선해요.
import { Highlight } from '@mantine/core';
function Demo() {
return <Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>;
}
용어별 커스텀 색상
text와 color 속성을 가진 객체 배열을 제공하면 하이라이트되는 용어마다 다른 색상을 지정할 수 있어요.
import { Highlight } from '@mantine/core';
function Demo() {
return (
<Highlight
highlight={[
{ text: 'error', color: 'red' },
{ text: 'warning', color: 'yellow' },
{ text: 'success', color: 'green' },
]}
>
Error: Invalid input. Warning: Check this field. Success: All tests passed.
</Highlight>
);
}
전체 단어 매칭
wholeWord prop을 사용하면 완전한 단어만 매칭해요. 활성화하면 'the'가 'there'이나 'theme'와 매칭되지 않아요.
import { Highlight, Stack, Text } from '@mantine/core';
function Demo() {
return (
<Stack gap="md">
<div>
<Text size="sm" fw={500} mb={5}>
With whole word matching (wholeWord={'{'}true{'}'})
</Text>
<Highlight highlight="the" wholeWord>
The theme is there
</Highlight>
</div>
<div>
<Text size="sm" fw={500} mb={5}>
Without whole word matching (default)
</Text>
<Highlight highlight="the">The theme is there</Highlight>
</div>
</Stack>
);
}
하이라이트 스타일 바꾸기
기본 Mark 스타일을 highlightStyles prop으로 덮어쓸 수 있어요. 스타일 객체나 테마를 받아 스타일을 반환하는 함수를 전달할 수 있어요.
import { Highlight } from '@mantine/core';
function Demo() {
return (
<Highlight
ta="center"
highlight={['highlighted', 'default']}
highlightStyles={{
backgroundImage:
'linear-gradient(45deg, var(--mantine-color-cyan-5), var(--mantine-color-indigo-5))',
fontWeight: 700,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
You can change styles of highlighted part if you do not like default styles
</Highlight>
);
}
Text props
Highlight는 Text 컴포넌트를 기반으로 해요. color를 제외한 모든 Text props를 사용할 수 있어요. color prop은 텍스트 색상이 아니라 하이라이트 배경색을 바꾸는 데 사용돼요.
import { Highlight } from '@mantine/core';
function Demo() {
return (
<Highlight
component="a"
href="https://mantine.dev"
target="_blank"
highlight="mantine"
fw={500}
c="var(--mantine-color-anchor)"
>
Mantine website
</Highlight>
);
}