Chakra-UI

I♥️Components

Highlight

|

Chakra Docs

|

⦾ Chakra UI's Highlight component allows you to highlight substrings within a text. It provides a simple and convenient way to emphasize specific words or phrases. You can render the main string as children of the Highlight component and pass the word(s) you want to highlight to the query prop. You can also use the style prop to define the characteristics for the highlighted parts.

The Highlight component can be imported as follows:

Examples

Basic Usage

⦾ In this example, the word "important" is highlighted with a green background, demonstrating how you can emphasize specific terms or phrases in your content. This is as simple as passing the word to be highlighted as a string to the query prop and specifying the styles to be applied.
It is crucial to prioritize important tasks in your workflow.

Code

Heading Highlights

⦾ This example demonstrates using the Highlight component within a Heading component. The word "Key" is highlighted with a purple background, illustrating how you can draw attention to key concepts or keywords within headings or titles.

Key concepts should be clearly explained in your documentation.

Code

Multi-Word Highlighting

⦾ In this example, the Highlight component is used to highlight multiple words: "efficiency," "accuracy," and "consistency." The highlighted words are styled with a cyan background, showcasing the ability to emphasize multiple terms simultaneously.

Ensuring efficiency, accuracy, and consistency in your work is essential.

Code

Substring Highlighting

⦾ This example shows how to highligh substrings within a block of text. The search query "product" is highlighted in two separate sentences. It demonstrates how you can accent specific substrings in search results or dynamic content.

Search results for: "product"

The new product launch has been well-received by customers.

Improving the product quality is a top priority for our team.

Code

Customization

⦾ This example utilizes the useHighlight hook to customize the rendering and styling of highlighted words. The words "collaboration" and "communication" within the text are styled differently, with a purple background to emphasize their significance. This example highlights the flexibility of the Highlight component in customizing rendered elements based on matches.

The project requires collaboration and effective communication among team members.

Code

Did you know?

Creative Idea No. 1

Real-Time Highlighting: You can dynamically highlight specific words or phrases in a user-inputted sentence in real-time. This interactive component allows users to input a keyword and a sentence, and the keyword will be highlighted wherever it appears in the sentence. It provides a seamless way to visually emphasize important terms or search for specific content within a text.

Word to highlight:

Type a sentence:

Characters remaining: 80

The weather outside is wonderful today.

Code

Creative Idea No. 2

Search Highlight: You can use the Highlight component to create an interactive document viewer with highlighting capabilities. This can be helpful when users need to search for specific terms or navigate through a lengthy document. By allowing users to input search queries, the Highlight component can dynamically highlight the matched terms, enabling users to locate relevant information quickly within the document.

Search term:

Once upon a time, in a small countryside village, there lived a cow named Felix. Felix was a happy and curious cow, always eager to explore the meadows and interact with other animals. Every day, Felix would wake up early in the morning and join the other cows for grazing in the lush green fields. Felix loved the feeling of the fresh grass beneath his hooves.One sunny day, Felix decided to venture beyond the meadows and explore the nearby forest. As Felix wandered through the trees, he encountered various creatures, including squirrels, rabbits, and birds. Felix made many new friends and enjoyed the beauty of nature.When the day turned to evening, Felix returned to the village with a heart full of excitement and stories to share. The other cows gathered around Felix, eager to hear about his adventures. Felix enthusiastically recounted every detail, emphasizing how much he loved exploring the forest.From that day onward, Felix became known as the adventurous cow who always had a fascinating story to tell. Whenever anyone mentioned the name Felix, it reminded them of the cow with a brave spirit and a thirst for exploration.And so, the tale of Felix the adventurous cow spread throughout the village, ensuring that Felix's name would forever be associated with curiosity, courage, and remarkable journeys.

Code

Creative Idea No. 3

Social Media Highlighter: This is a creative use of the Highlight component that allows users to write a message and highlight @ mentions and hashtags within the text. As a user types in the Textarea input, any mentions or hashtags (text starting with '@' or '#') are automatically highlighted using the Highlight component. This component can be useful in social media-related applications or any scenario where highlighting specific keywords or tags is necessary.

Tag Highlighter

Write a message:

Highlighted Result:

I am @EvanMarie and I am excited about #code

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.