# jsx-highlighter

> Small and focused library to mark with a css classed span a part of an JSX HTML text.

Latest version **2.0.1** (published 2020-09-09) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install jsx-highlighter
pnpm add jsx-highlighter
yarn add jsx-highlighter
bun add jsx-highlighter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-09-09 |
| First published | 2016-03-07 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | @luispablo |
| Maintainers | luispablo |
| Keywords | jsx, highlight |

## Links

- npm: https://www.npmjs.com/package/jsx-highlighter
- Repository: https://github.com/luispablo/jsx-highlighter
- Homepage: https://github.com/luispablo/jsx-highlighter#readme
- Issues: https://github.com/luispablo/jsx-highlighter/issues
- npm.io page: https://npm.io/package/jsx-highlighter

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2020-09-09
- 2.0.0 — 2020-09-09
- 1.3.2 — 2016-03-07
- 1.3.1 — 2016-03-07
- 1.3.0 — 2016-03-07
- 1.2.1 — 2016-03-07
- 1.2.0 — 2016-03-07
- 1.1.0 — 2016-03-07
- 1.0.2 — 2016-03-07
- 1.0.1 — 2016-03-07
- 1.0.0 — 2016-03-07

## README

# jsx-highlighter

Small and focused library to mark with a css classed span a part of an JSX HTML text.

**If you like it, star; if you don't, please tell me why!! :)**

## Installation

```
npm install --save jsx-highlighter
```

## Usage

Initialize it with the CSS class, search wildcard and searched text

```jsx
import buildHighlighter from "jsx-highlighter";

...

// "highlighted"  is the CSS class applied to the wraping HTML span
// "%"            is the wildcard used to search (used only to analyze, removed from the final result)
// "%ome"         is the text searched for, so you'd want 'ome', 'Ome', 'OMe', etc to be highlighted
const highlight = buildHighlighter("highlighted", "%", "%ome");

// and when you build your JSX
return <div>{highlight("This is an awesome util!")}</div>;
```

**All fields are mandatory.**

This will give you as a result: ```<span>This is an awes<span class="highlighted">ome</span> util!</span>```

## Credits

[@luispablo](https://twitter.com/luispablo)

---
_Source: https://npm.io/package/jsx-highlighter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._