Highlight

Highlight emphasizes matching fragments inside longer strings, reusing the Text component so typography settings stay consistent across platforms.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Basic

Default highlight behavior with a single search term. Matching fragments are wrapped with the theme-aware highlight styles.

Loading demo…

import

 

{

 

View

 

}

 

from

 

'react-native'

;

import

 

{

 

Highlight

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

PARAGRAPH

 

=

 

'Highlight This, definitely THIS and also this!'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<View

>

      

<Text

 

variant

=

"h5"

>

Case

-

insensitive match

</Text

>

      

<Highlight

 

highlight

=

"this"

>

{

PARAGRAPH

}

</Highlight

>

    

</View

>

  

)

;

}

Multiple

Pass an array to highlight several distinct substrings. Every match shares the same styles by default.

Loading demo…

import

 

{

 

View

 

}

 

from

 

'react-native'

;

import

 

{

 

Highlight

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

SENTENCE

 

=

 

'React UI Library brings patterns, blocks, and building tools together.'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<View

>

      

<Text

 

variant

=

"h5"

>

Multiple

values

</Text

>

      

<Highlight

 

highlight

=

{

[

'blocks'

,

 

'tools'

]

}

>

{

SENTENCE

}

</Highlight

>

    

</View

>

  

)

;

}

Styles

Swap the marker color with the highlightColor prop, passing any theme palette name. The default marker style (yellow background, unchanged text) is preserved.

Loading demo…

import

 

{

 

Highlight

,

 

Text

,

 

Block

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

copy

=

 

'You can switch the highlight color while keeping the default marker style.'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Block

>

      

<Text

 

variant

=

"h5"

>

Highlight

color

</Text

>

      

<Highlight

 

highlight

=

"highlight"

 

highlightColor

=

"highlight"

>

{

copy

}

</Highlight

>

      

<Highlight

 

highlight

=

"color"

 

highlightColor

=

"teal"

>

{

copy

}

</Highlight

>

      

<Highlight

 

highlight

=

"marker"

 

highlightColor

=

"pink"

>

{

copy

}

</Highlight

>

    

</Block

>

  

)

;

}

Scan to open this page on your phonereact-ui-library.com/components/Highlight

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap