Highlight

Demos

How to import

import { Highlight } from '@fibrous/semi-ui-react';

Basic usage

You can specify keywords to be highlighted with searchWords and source text with sourceString

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

Code

import { Highlight } from '@fibrous/semi-ui-react';

export default function HighlightDemo() {
    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];

    return (
        <h2>
            <Highlight sourceString={sourceString} searchWords={searchWords} />
        </h2>
    );
}

Specify highlight style

By default, the highlighted text will have its own text style, the text color is black, and the background color is --semi-yellow-4.
In dark mode, the text color is white, and the background color is --semi-yellow-2.
When you need to customize different highlight styles, you can specify them through highlightClassName, highlightStyle

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

Code

import { Highlight } from '@fibrous/semi-ui-react';

export default function HighlightDemo() {
    const sourceString = '从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];

    return (
        <>
            <h2>
                <Highlight
                    sourceString={sourceString}
                    searchWords={searchWords}
                    highlightStyle={{
                        borderRadius: 6,
                        marginLeft: 4,
                        marginRight: 4,
                        paddingLeft: 4,
                        paddingRight: 4,
                        backgroundColor: 'var(--semi-teal-7)',
                        color: 'var(--semi-white)',
                    }}
                />
            </h2>
            <h2>
                <Highlight
                    sourceString={sourceString}
                    searchWords={searchWords}
                    highlightStyle={{
                        borderRadius: 6,
                        marginLeft: 4,
                        marginRight: 4,
                        paddingLeft: 4,
                        paddingRight: 4,
                        backgroundColor: 'var(--semi-color-primary)',
                        color: 'var(--semi-white)',
                    }}
                />
            </h2>
        </>
    );
}

Use Different Styles for Different Texts

It supports using different highlight styles for different highlighted texts. The searchWords is a string array by default. When an array of objects is passed in, the highlighted text can be specified through text, and the className and style can be specified separately at the same time.

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

Code

import { Highlight } from '@fibrous/semi-ui-react';

export default function HighlightDemo() {
    return (
        <h2>
            <Highlight
                component="span"
                sourceString="从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中"
                searchWords={[
                    {
                        text: 'Semi',
                        style: {
                            backgroundColor: 'var(--semi-teal-7)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword1',
                    },
                    {
                        text: '设计系统',
                        style: {
                            backgroundColor: 'var(--semi-color-primary)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword2',
                    },
                    {
                        text: '设计稿和代码',
                        style: {
                            backgroundColor: 'var(--semi-violet-5)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword3',
                    },
                ]}
                highlightStyle={{ borderRadius: 4 }}
            />
        </h2>
    );
}

Specify the highlight tag

Semi will wrap the text matching searchWords in sourceString with mark tag by default, you can also re-specify the tag through component

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

Code

import { Highlight } from '@fibrous/semi-ui-react';

export default function HighlightDemo() {
    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];

    return (
        <h2>
            <Highlight sourceString={sourceString} searchWords={searchWords} component="strong" />
        </h2>
    );
}

API Reference

Props

Property	Description	Type	Default
autoEscape	Whether to escape regular expression characters in `searchWords`. When off, each search word is matched as a regular expression.	`boolean`	`true`
caseSensitive	Whether matching is case sensitive.	`boolean`	`false`
component	Tag name of the element that wraps highlighted text, such as `span`.	`string`	`"mark"`
highlightClassName	Class name of the highlight tags. It is added together with the `className` of an object item in `searchWords`.	`string`	-
highlightStyle	Inline style of the highlight tags. Keys are camelCase such as `borderRadius`, and numeric lengths get `px` as in React. Merged with the `style` of an object item in `searchWords`, where the item wins on conflicts.	`React.CSSProperties`	-
searchWords	Text to highlight: a string, an array of strings, or an array of objects with `text`, `className` and `style`. Defaults to an empty array, which highlights nothing.	`string \| SearchWords`	-
sourceString	Source text to search in.	`string`	`""`

Highlight has no root element and renders inline chunks: extra props such as className, style and id have nowhere to land and have no effect, and it cannot take a ref.