├── .gitignore ├── LICENSE ├── package.json ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016, Claudéric Demers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-highlight-words", 3 | "version": "1.0.1", 4 | "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/clauderic/react-native-highlight-words.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "react", 16 | "reactjs", 17 | "react-component", 18 | "highlighter", 19 | "highlight", 20 | "text", 21 | "words", 22 | "matches", 23 | "substring", 24 | "occurrences", 25 | "search" 26 | ], 27 | "author": "Clauderic Demers", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/clauderic/react-native-highlight-words/issues" 31 | }, 32 | "homepage": "https://github.com/clauderic/react-native-highlight-words", 33 | "dependencies": { 34 | "highlight-words-core": "^1.0.3", 35 | "prop-types": "^15.5.7" 36 | }, 37 | "peerDependencies": { 38 | "react": "^15.5.0 || ^16" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | import {findAll} from 'highlight-words-core'; 4 | import PropTypes from 'prop-types'; 5 | 6 | Highlighter.propTypes = { 7 | autoEscape: PropTypes.bool, 8 | highlightStyle: Text.propTypes.style, 9 | searchWords: PropTypes.arrayOf(PropTypes.string).isRequired, 10 | textToHighlight: PropTypes.string.isRequired, 11 | sanitize: PropTypes.func, 12 | style: Text.propTypes.style 13 | }; 14 | 15 | /** 16 | * Highlights all occurrences of search terms (searchText) within a string (textToHighlight). 17 | * This function returns an array of strings and elements (wrapping highlighted words). 18 | */ 19 | export default function Highlighter({ 20 | autoEscape, 21 | highlightStyle, 22 | searchWords, 23 | textToHighlight, 24 | sanitize, 25 | style, 26 | ...props 27 | }) { 28 | const chunks = findAll({textToHighlight, searchWords, sanitize, autoEscape}); 29 | 30 | return ( 31 | 32 | {chunks.map((chunk, index) => { 33 | const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); 34 | 35 | return (!chunk.highlight) 36 | ? text 37 | : ( 38 | 42 | {text} 43 | 44 | ); 45 | })} 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Highlight Words 2 | React Native component used to highlight words within a larger body of text. This is a port of [react-highlight-words](https://github.com/bvaughn/react-highlight-words). 3 | 4 | Check out a [demo](https://getexponent.com/@clauderic/react-native-highlight-words) using Exponent. 5 | 6 | ## Installation 7 | Using [npm](https://www.npmjs.com/package/react-native-highlight-words): 8 | ``` 9 | npm i --save react-native-highlight-words 10 | ``` 11 | 12 | ## Usage 13 | 14 | To use it, just provide it with an array of search terms and a body of text to highlight: 15 | 16 | ```jsx 17 | import Highlighter from 'react-native-highlight-words'; 18 | 19 | 24 | ``` 25 | 26 | And the `Highlighter` component will highlight all occurrences of search terms within the text: 27 | 28 | screen shot 2015-12-19 at 8 23 43 am 29 | 30 | 31 | ## Props 32 | 33 | | Property | Type | Required? | Description | 34 | |:----------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------| 35 | | autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | 36 | | highlightStyle | Object | | Styles applied to highlighted text | 37 | | sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | 38 | | searchWords | Array | ✓ | Array of search words | 39 | | style | Object | | Styles applied to the text wrapper | 40 | | textToHighlight | String | ✓ | Text to highlight matches in | 41 | 42 | ## License 43 | MIT License - fork, modify and use however you want. 44 | --------------------------------------------------------------------------------