Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aidanaden/solid-highlight-words
Solid component to highlight words within a larger body of text (based on react-highlight-words)
https://github.com/aidanaden/solid-highlight-words
Last synced: about 2 months ago
JSON representation
Solid component to highlight words within a larger body of text (based on react-highlight-words)
- Host: GitHub
- URL: https://github.com/aidanaden/solid-highlight-words
- Owner: aidanaden
- Created: 2024-01-10T01:04:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-27T15:29:07.000Z (8 months ago)
- Last Synced: 2024-10-13T08:51:24.303Z (3 months ago)
- Language: TypeScript
- Homepage: https://solid-highlight-words.pages.dev/
- Size: 337 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# solid-highlight-words
>
[](https://bundlephobia.com/package/solid-highlight-words)
[](https://www.npmjs.com/package/solid-highlight-words)
[](https://pnpm.io/)
[download-image]: https://img.shields.io/npm/dm/solid-highlight-words.svg
[download-url]: https://npmjs.org/package/solid-highlight-words
[](https://npmjs.org/package/solid-highlight-words)
Solid component to highlight words within a larger body of text. Based on [react-highlight-words](https://github.com/bvaughn/react-highlight-words)
Check out a demo [here](https://solid-highlight-words.pages.dev).
## Usage
Install it:
```bash
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.](https://codesandbox.io/p/sandbox/elated-dubinsky-nxrpvj)
```jsx
import { createRoot } from "solid-js";
import { Highlighter } from "solid-highlight-words";
const root = createRoot(document.getElementById("root"));
root.render(
);
```
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 `` |
| `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](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) 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 | ✓ | 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 `` |
## Custom highlight tag
By default, this component uses an HTML Mark Text element (``) 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:
```js
const Highlight = ({ children, highlightIdx }) => (
{children}
);
```
## License
MIT License - fork, modify and use however you want.