Text Touch Highlighter is a React Native component that enables users to tap and drag to select text, as well as add notes and highlights in your apps. Works seamlessly with React Native Reanimated and Gesture Handler.
How to use it:
1. Install and import the HighlightText component.
# Yarn $ yarn add react-native-reanimated $ yarn add react-native-gesture-handler $ yarn add rn-text-touch-highlight # NPM $ npm install react-native-reanimated $ npm install react-native-gesture-handler $ npm install rn-text-touch-highlight
import { HighlightText } from 'rn-text-touch-highlight';
2. Add the <HighlightText /> component into your JSX.
<HighlightText />
3. Available component props.
/**
* The text content to be displayed in the HighlightText component.
*/
text: string;
/**
* Finger press delay before highlighting the text. Default is 150ms.
*/
highlightInitialDelay?: number;
/**
* An array specifying the initial highlight data, this is used to render text highlight initially.
*/
initialHighlightData?: Array<{ start: number; end: number }>;
/**
* The margin of the HighlightText component.
*/
margin?: number;
/**
* The margin at the bottom of the HighlightText component.
*/
marginBottom?: number;
/**
* The margin at the top of the HighlightText component.
*/
marginTop?: number;
/**
* The margin at the left of the HighlightText component.
*/
marginLeft?: number;
/**
* The margin at the right of the HighlightText component.
*/
marginRight?: number;
/**
* A callback function triggered when the highlighting process starts.
*/
onHighlightStart?: () => void;
/**
* A callback function triggered when the highlighting process ends.
* It receives the id of the highlighted area as a parameter. This id can be used to delete the highlighted area.
*/
onHighlightEnd?: (id: number) => void;
/**
* A callback function triggered when a highlighted region is tapped.
* It receives the id of the tapped region and the event object.
*/
onHighlightTapped?: (
id: number,
e: { absoluteX: number; absoluteY: number }
) => void;
/**
* If true, clears the highlight when a region is tapped.
* Default is false.
*/
clearHighlightOnTap?: boolean;
/**
* The backgroundColor of the HighlightText Component
*/
backgroundColor?: string;
Preview:
Download Details:
Author: benjamineruvieru
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/benjamineruvieru/rn-text-touch-highlight
License: MIT
