A lightweight and composable React component for selecting and highlighting text. Perfect for code documentation, tutorials, and interactive text highlighting and selection.
npm install lisere!Liseré - Liseré is a lightweight and composable React component for text highlighting.
Liseré is a lightweight and composable React component for text highlighting. It gives you precise control over how users select, annotate, and interact with text. Perfect for code documentation, tutorials, and interactive text highlighting and selection.
https://github.com/user-attachments/assets/8abe053a-c2f8-4946-bbee-dc1704111960
To get started with the library, install it using:
``sh`npm
npm install lisere
`sh`yarn
yarn add lisere
`sh`pnpm
pnpm add lisere
`tsx
import { TextHighlighter } from 'lisere';
console.log(selection.text)
}}
highlightStyle={{
className: 'my-highlight',
style: { backgroundColor: '#ffeb3b' },
}}
>
Highlight this paragraph by selecting text.
Props
$3
| Prop | Type | Default | Description |
| ------------------------------ | -------------------------------------------------------- | -------- | --------------------------------------- |
|
| ReactNode | — | Content to make highlightable |
| enabled | boolean | true | Whether highlighting is active |
| containerElement | keyof JSX.IntrinsicElements | 'div' | Wrapper element for content |
| selectionBoundary | 'word' \| 'cursor' | 'word' | Selection granularity |
| highlightElement | string | 'span' | Tag used to wrap highlighted content |
| highlightStyle | { className?: string; style?: CSSProperties } | — | Styles applied to highlights |
| allowCrossElementSelection | boolean | false | Enable multi-node text selection |
| clearSelectionAfterHighlight | boolean | true | Clears native selection after highlight |
| removeHighlightOnClick | boolean | false | Click to remove highlights |
| selectedContent | TextSelection[] | [] | Preloaded highlights |
| onTextSelected | (selection: TextSelection) => void | — | Fires when text is selected |
| onTextHighlighted | (selection: TextSelection) => void | — | Fires when highlight is confirmed |
| onHighlightRemoved | (selection: TextSelection) => void | — | Fires when a highlight is removed |
| renderSelectionUI | ({ selection, modifyHighlight, onClose }) => ReactNode | — | Custom floating UI on selection |Examples
$3
`tsx
import { TextHighlighter } from 'lisere';
console.log('Highlighted:', selection.text);
}}
>
Select any text in this paragraph to highlight it.
`$3
tsx
selectionBoundary="cursor"
removeHighlightOnClick={true}
highlightStyle={{
className: 'custom-highlight',
style: { backgroundColor: '#ffeb3b', padding: '2px' },
}}
>
Cross-element
selection
`$3
tsx
className: 'custom-class',
style: { backgroundColor: '#4caf50', padding: '2px' },
}}
>
Custom highlight appearance.
`$3
tsx
Rendered as elements.
`$3
tsx
Highlight "{selection.text}"?
)}
>
Select to trigger overlay UI.
`$3
tsx
{ text: 'Liseré', startOffset: 0, endOffset: 6 },
{ text: 'highlighting', startOffset: 10, endOffset: 21 },
]}
/>
`$3
tsx
import {
getCurrentTextSelection,
highlightRange,
removeHighlight,
findTextInElement,
} from 'lisere';const container = document.getElementById('content');
const ranges = findTextInElement(container, 'search term');
ranges.forEach(range => {
const highlight = highlightRange(range, 'span', {
className: 'manual-highlight',
style: { backgroundColor: 'yellow' },
})
});
const selection = getCurrentTextSelection();
if (selection) {
console.log('Selected text:', selection.text);
}
const highlightElement = document.querySelector('.highlight');
if (highlightElement) {
removeHighlight(highlightElement);
}
`$3
tsx
const handleHighlightError = (error: Error) => {
console.error('Highlight failed:', error);
showNotification('Failed to highlight text', 'error');
}
try {
saveHighlight(selection);
} catch (error) {
handleHighlightError(error);
}
}}
>
Content with error handling.
`$3
tsx
const containerRef = useRef(null);
const { highlights, highlightText, clearHighlights } = useTextHighlighter({
containerRef,
highlightStyle: { className: 'optimized-highlight' },
})const handleSearch = (searchTerm: string) => {
highlightText(searchTerm);
}
const handleClear = () => {
clearHighlights();
}
`Hook Usage
tsx
import { useTextHighlighter } from 'lisere';const {
selection,
highlights,
highlightText,
removeHighlight,
clearHighlights,
} = useTextHighlighter({ containerRef });
`TypeScript
The following types are exposed from the package:
ts
import {
TextHighlighter,
useTextHighlighter,
TextSelection,
HighlightStyle,
} from 'lisere';
``