하이라이팅 텍스트 만들기
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],
);
반응형
'한 걸음 > React & Next.js' 카테고리의 다른 글
[React + typescript] 말줄임표(text-ellipsis) 중간에만 적용하기 (0) | 2024.03.25 |
---|---|
[Next.js] eslint 초기설정 (0) | 2024.03.06 |
npm > pnpm으로 마이그레이션 하기 (1) | 2024.01.10 |
[React + Vite + styled-components] npm 배포 후 ThemeProvider를 인식하지 못할 때 (0) | 2024.01.09 |
[vite+storybook] 스토리북 argTypes 명확하게 표기하기 (0) | 2024.01.05 |