solid-highlight-words

Solid component to highlight words within a larger body of text. Based on react-highlight-words

Check out a demo here.

Usage

Install it:

npm i solid-highlight-words
# or
yarn add solid-highlight-words
# or
pnpm add solid-highlight-words

To use it, just provide it with an array of search terms and a body of text to highlight.

Try this example in Code Sandbox.

import { createRoot } from "solid-js";
import { Highlighter } from "solid-highlight-words";

const root = createRoot(document.getElementById("root"));
root.render(
  <Highlighter
    highlightClass="YourHighlightClass"
    searchWords={["and", "or", "the"]}
    autoEscape={true}
    textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
  />
);

And the Highlighter will mark all occurrences of search terms within the text:

Props

Property	Type	Required?	Description
activeClass	String		The class name to be applied to an active match. Use along with activeIdx
activeIdx	Number		Specify the match index that should be actively highlighted. Use along with activeClass
activeStyle	Object		The inline style to be applied to an active match. Use along with activeIdx
autoEscape	Boolean		Escape characters in searchWords which are meaningful in regular expressions
class	String		CSS class name applied to the outer/wrapper <span>
caseSensitive	Boolean		Search should be case sensitive; defaults to false
findChunks	Function		Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default findChunks function in highlight-words-core for signature. Have a look at the custom findChunks example on how to use it.
highlightClass	String or Object		CSS class name applied to highlighted text or object mapping search term matches to class names.
highlightStyle	Object		Inline styles applied to highlighted text
highlightTag	Node or String		Type of tag to wrap around highlighted matches. Defaults to mark but can also be a Solid ValidComponent
sanitize	Function		Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string
searchWords	Array<String | RegExp>	✓	Array of search words. String search terms are automatically cast to RegExps unless autoEscape is true.
textToHighlight	String	✓	Text to highlight matches in
unhighlightClass	String		CSS class name applied to unhighlighted text
unhighlightStyle	Object		Inline styles applied to unhighlighted text
unhighlightTag	Node or String		Type of tag applied to unhighlighted parts. Defaults to span but can also be a Solid ValidComponent
*	any		Any other props (such as title or data-*) are applied to the outer/wrapper <span>

Custom highlight tag

By default, this component uses an HTML Mark Text element (<mark>) to wrap matched text, but you can inject a custom tag using the highlightTag property. This tag should be a Solid ValidComponent that accepts the following properties:

Property	Type	Description
children	String	Text to be highlighted
highlightIdx	Number	Index of matched text

For example:

const Highlight = ({ children, highlightIdx }) => (
  <strong class="highlighted-text">{children}</strong>
);

License

MIT License - fork, modify and use however you want.