Description
This is a React component to highlight phrases or a group of phrases within text. Complete with phrase priority, meaning phrases can collide / overlap!
React-Text-Highlights alternatives and similar libraries
Based on the "UI Components" category.
Alternatively, view React-Text-Highlights alternatives based on common mentions on social networks and blogs.
-
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. -
react-table
π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table -
sweetalert2
β¨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. πΊπ¦ -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
AG Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. -
downshift π
π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. -
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable listβοΈ -
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion -
react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg -
react-day-picker
DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications. -
fixed-data-table
DISCONTINUED. A React table component designed to allow presenting thousands of rows of data.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of React-Text-Highlights or a related project?
README
React-Text-Highlights
This is a React component to highlight phrases or a group of phrases within text. You can find a demo here
Installation
npm i --save react-text-highlights
Important Concept
This library allows you to highlight a variety of phrases or 'phrase sets' in any color you'd like. Even phrases that collide or overlap can be highlighted! This library priorities phrases and their highlight in order from lowest-highest.
Taking the example from below in the Usage section, phrases that are blue are the lowest priority and phrases that are red are the highest priority. Our red phrase 'highlight' will overlap the blue phrase 'highlight effect' and when you hover over the word 'highlight' red will be of highest priority and blue (or any other colliding phrases) will go transparent.
TLDR: order your phrases from lowest priority - highest priority and the component will handle collisions / overlapping, always favoring the higher priority highlights.
Usage
import '../node_modules/react-text-highlights/styles.css';
import {TextController} from 'react-text-highlights';
class App extends Component {
render() {
return (
<TextController phrases={{ 'blue':['highlight effect'], 'yellow':['text highlighting'], 'red':['highlight', 'non-highlighted'] }}
noWhiteSpace={true} inputField={true} textAreaCols={50} textAreaRows={5} autoStart={true}
defaultText="this is an example of text highlighting! some text can be highlighted and some non-highlighted. hover over phrases to isolate their highlight effect."/>
);
}
}
export default App;
Props
Property | Type | Required? | Description |
---|---|---|---|
phrases | Dictionary | yes | a dictionary of phrases to highlight (priority lowest-highest) |
noWhiteSpace | Boolean | no | Specifies if you want additional white space around highlighted text (default false) |
inputField | Boolean | no | Will component display textarea for string input? (default false) |
autoStart | Boolean | no | If true component will automatically highlight text on render (default false) |
defaultText | String | no | text to be highlighted (can be modified if inputField enabled) |
textAreaRows | Number | no | if inputField enabled this sets rows of the TextArea |
textAreaCols | Number | no | if inputField enabled this sets columns of the TextArea |
License
MIT License - modify, fork, clone and use this however you want or need friends.
*Note that all licence references and agreements mentioned in the React-Text-Highlights README section above
are relevant to that project's source code only.