Solid-highlight-words NPM

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.

solidjs component solid-component solid syntax highlighting highlight code syntax typescript

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago