Highlight

텍스트 안에서 검색어와 일치하는 부분에 표시를 합니다. 검색 결과 목록이나 필터링된 목록에서 무엇이 걸렸는지 보여 줄 때 씁니다.

import { Highlight } from 'neba';

<Highlight query="acrylic">A sheet of cut acrylic.</Highlight>
<Highlight query={['data', 'database']} variant="text" color="primary">…</Highlight>
<Highlight query={/\d+/} caseSensitive>…</Highlight>;

Props

Prop	타입	기본값	설명
query *	string | string[] | RegExp	—	무엇을 찾을지. 배열은 긴 것부터 시도하므로 database가 data보다 먼저 잡힙니다. RegExp는 그대로 쓰이며 global 플래그만 강제됩니다. 이때 caseSensitive와 wholeWord는 무시됩니다
variant공통	'solid' | 'outline' | 'text'	'solid'	표식의 무게. solid는 형광펜, outline은 단어를 두르는 얇은 선, text는 색만
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'warning'	의미론적 색 역할. warning이 기본인 것은 임의가 아닙니다. 채움이 밝고 잉크가 어두운 유일한 계열이라, solid warning 표식이 실제로 노란 형광펜처럼 보입니다
caseSensitive	boolean	false	a와 A를 다른 글자로 볼지
wholeWord	boolean	false	단어 전체일 때만 잡을지. cat이 "cat"은 잡고 "concatenate"는 잡지 않습니다. 단어는 글자·숫자·밑줄의 연속이므로, 띄어쓰기로 단어를 나누지 않는 글에서는 효과가 거의 없습니다
underline	boolean	false	표식에 밑줄도 긋습니다. 모든 variant와 겹쳐 쓸 수 있습니다
weight	'regular' | 'medium' | 'semibold' | 'bold'	—	표식의 굵기. 생략하면 주변 글과 같습니다. 표면이 이미 "이것"이라고 말하고 있고, 문장 안에서 한 단어만 굵어지면 줄 전체의 리듬이 바뀝니다
children	ReactNode	—	검색 대상 텍스트. 요소 안까지 들어가므로 strong 안의 일치도 잡히고 strong도 그대로 남습니다

query에는 검색창이 들고 있는 값을 그대로 넘기며, 문자열과 문자열 배열, 정규식을 받습니다. 일치 지점을 미리 계산할 필요는 없습니다. 상태를 갖지 않으므로 children과 query가 바뀌면 표시도 함께 갱신됩니다.

size는 없습니다. 표식은 흐르는 텍스트 안에 놓이므로 주변 글자 크기를 그대로 따릅니다.

예시

variant · underline · weight

variant는 표식의 무게입니다. solid는 형광펜처럼 채우고, outline은 단어를 얇은 선으로 두르고, text는 색만 바꿉니다. underline과 weight는 그 위에 겹쳐 쓰는 별개의 축입니다.

기본 color는 warning입니다. 채움이 밝고 잉크가 어두운 유일한 계열이라 solid에서 노란 형광펜처럼 읽힙니다. 다른 계열은 색 블록 위의 흰 글자가 됩니다.

import { Highlight } from 'neba';

const sentence = 'A sheet of cut acrylic, not a moulded plastic key.';

export default function HighlightVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3 text-[0.8125rem]/[1.6]">
      <Highlight query="acrylic">{sentence}</Highlight>
      <Highlight query="acrylic" variant="outline" color="primary">
        {sentence}
      </Highlight>
      <Highlight query="acrylic" variant="text" color="danger">
        {sentence}
      </Highlight>
      <Highlight query="acrylic" variant="text" color="primary" underline>
        {sentence}
      </Highlight>
      <Highlight query="acrylic" variant="text" color="success" weight="bold">
        {sentence}
      </Highlight>
    </div>
  );
}

caseSensitive와 wholeWord

caseSensitive는 대소문자를 구분하고, wholeWord는 단어 경계에서만 일치시킵니다. 여기서 단어는 글자·숫자·밑줄의 연속이므로, 띄어쓰기로 단어를 구획하지 않는 한국어나 일본어에서는 효과가 거의 없습니다. 기본값이 꺼짐인 이유입니다.

문자열 배열은 긴 것부터 시도합니다. ['data', 'database']를 짧은 쪽부터 맞추면 data만 잡히고 base가 표식 밖으로 남기 때문입니다.

import { Highlight } from 'neba';

export default function HighlightMatching() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4 text-[0.8125rem]/[1.6]">
      {/* Several terms at once. The longest is tried first, so `database` wins
          over `data` rather than leaving `base` outside the mark. */}
      <Highlight query={['data', 'database']}>
        One data row in one database, and the data it holds.
      </Highlight>

      {/* Case, which is off by default. */}
      <Highlight query="fox" caseSensitive color="primary">
        Fox, FOX and fox are three different words to a case-sensitive search.
      </Highlight>

      {/* Whole words, which is what stops `cat` marking `concatenate`. */}
      <Highlight query="cat" wholeWord color="success">
        A cat that concatenates is still a cat.
      </Highlight>

      {/* A regular expression, used as written. */}
      <Highlight query={/\b[A-Z]{2,}\b/} color="danger">
        HTTP and TLS are acronyms; Http and Tls are not.
      </Highlight>
    </div>
  );
}

중첩된 요소 안의 텍스트

children은 문자열일 필요가 없습니다. React 트리를 따라 내려가면서 텍스트 노드만 표시하고 나머지 요소는 그대로 둡니다.

import { Highlight, Typography } from 'neba';

/**
 * The children are walked into rather than required to be a string, which is
 * what makes a highlight survive the first search result that has markup in it.
 */
export default function HighlightNested() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Highlight query="surface" color="primary">
        <Typography level="body">
          A <strong>surface</strong> is a sheet, and a <em>surface</em> that moves is a key. The{' '}
          <strong>surface</strong> keeps its edge either way.
        </Typography>
      </Highlight>
    </div>
  );
}

접근성

• 표식은 실제 <mark> 요소로 렌더링됩니다. "읽는 사람에게 관련이 있는 부분"이라는 의미가 함께 전달되므로, 한 문단에서 너무 많은 단어를 표시하면 그 의미가 희석됩니다.
• <mark>는 브라우저 기본 스타일시트에서 노란 배경을 갖고 옵니다. 그래서 variant="text"도 background를 transparent로 명시합니다.