하이라이팅 텍스트 만들기

2024. 2. 8. 15:27
반응형
  const makeHighlightText = useCallback(
    (renderedText?: string) => {
      if (!renderedText) return '';
      if (!searchKeyword) return renderedText;

      const keywordRegex = new RegExp(`(${searchKeyword})`, 'gi');
      const textArray = renderedText.split(keywordRegex);

      return textArray.map((part, partIndex) => {
        if (keywordRegex.test(part))
          return (
            <Typography
              key={`part-${part}-${partIndex}`}
              tag="span"
              color="primaryMain"
              fontType="body2R12"
            >
              {part}
            </Typography>
          );

        return part;
      });
    },
    [searchKeyword],
  );
반응형

BELATED ARTICLES

more