diff --git a/Readme.md b/Readme.md index 3792ec6..e3c2f61 100644 --- a/Readme.md +++ b/Readme.md @@ -2,9 +2,9 @@ Highlight search term in a page. Vanilla JS, compatible with frontend frameworks (React, Vite, Angular, etc). -Does not modify the DOM. Relies on the browser's [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) ([limited browser support](https://caniuse.com/?search=CSS.Highlights)). +Does not modify the DOM. Relies on the browser's [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API) ([not supported by Firefox yet](https://caniuse.com/?search=CSS.Highlights)). -This is not a syntax highlighter API. It highlights text in a page based on a search term. +**Note**: This is not a syntax highlighter library. It highlights text in a page based on a search term. ## Usage @@ -55,6 +55,7 @@ If you use a frontend framework like React, you can use it in a `useEffect` hook ```jsx import { useEffect, useState } from "react"; +import { highlightSearchTerm } from "highlight-search-term"; export default function App() { const [search, setSearch] = useState(""); diff --git a/demo/index.html b/demo/index.html index cd0214f..2eeb3b5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,7 +33,7 @@
import { highlightSearchTerm } from 'highlight-search-term';
-highlightSearchTerm('lorem', '.content');
+highlightSearchTerm({ search: 'lorem', selector: '.content' });
@@ -90,7 +90,10 @@
MIT
diff --git a/package.json b/package.json index 6e7269d..c3ad576 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.9", "description": "Highlight search term in a page. Vanilla JS, compatible with frontend frameworks (React, Vite, Angular, etc).", "repository": "marmelab/highlight-search-term", - "homepage": "https://github.com/marmelab/highlight-search-term", + "homepage": "https://marmelab.com/highlight-search-term/", "main": "src/index.js", "types": "src/index.d.ts", "scripts": {