diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..beaf8f5 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +node_modules +sample.gif \ No newline at end of file diff --git a/README.md b/README.md index 3173927..963f056 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,17 @@ -# React Native Highlight Words +# RN Highlight Words + 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). -Check out a [demo](https://getexponent.com/@clauderic/react-native-highlight-words) using Exponent. +## Changelog + +- [x] OnPress event added for Normal/Highlighted text ## Installation -Using [npm](https://www.npmjs.com/package/react-native-highlight-words): + +Using [npm](https://www.npmjs.com/package/rn-highlight-words): + ``` -npm i --save react-native-highlight-words +npm i --save rn-highlight-words ``` ## Usage @@ -14,30 +19,40 @@ npm i --save react-native-highlight-words To use it, just provide it with an array of search terms and a body of text to highlight: ```jsx -import Highlighter from 'react-native-highlight-words'; +import Highlighter from "rn-highlight-words"; + highlightStyle={{ backgroundColor: "yellow" }} + searchWords={["and", "or", "the"]} + textToHighlight="The dog is chasing the cat. Or perhaps they are just playing?" + onPressNormalText={() => console.log("normal text is clickeddd!")} + onPressHighlightedText={() => console.log("highlighted text is clickeddd!")} +/>; ``` And the `Highlighter` component will highlight all occurrences of search terms within the text: -screen shot 2015-12-19 at 8 23 43 am + +And if you want to get highlighted text that clicked, get in `onPressHighlightedText` as + +``` +onPressHighlightedText = {text => console.log("highlighted text that click: " + text)} +``` ## Props -| Property | Type | Required? | Description | -|:----------------|:--------------|:---------:|:------------------------------------------------------------------------------------------------------------------------| -| autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | -| highlightStyle | Object | | Styles applied to highlighted text | -| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | -| searchWords | Array | ✓ | Array of search words | -| style | Object | | Styles applied to the text wrapper | -| textToHighlight | String | ✓ | Text to highlight matches in | +| Property | Type | Required? | Description | +| :--------------------- | :------------ | :-------: | :---------------------------------------------------------------------------------------------------------------------- | +| autoEscape | Boolean | | Escape characters which are meaningful in regular expressions | +| highlightStyle | Object | | Styles applied to highlighted text | +| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` | +| searchWords | Array | ✓ | Array of search words | +| style | Object | | Styles applied to the text wrapper | +| textToHighlight | String | ✓ | Text to highlight matches in | +| onPressNormalText | Function | | onPress event for normal text | +| onPressHighlightedText | Function | | onPress event for highlighted text (returns text that clicked) | ## License -MIT License - fork, modify and use however you want. + +[MIT License](LICENSE) diff --git a/index.js b/index.js index e15cc90..608c8c8 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,8 @@ Highlighter.propTypes = { searchWords: PropTypes.arrayOf(PropTypes.string).isRequired, textToHighlight: PropTypes.string.isRequired, sanitize: PropTypes.func, + onPressNormalText = PropTypes.func, + onPressHighlightedText = PropTypes.func, style: Text.propTypes.style }; @@ -22,20 +24,22 @@ export default function Highlighter({ searchWords, textToHighlight, sanitize, + onPressNormalText, + onPressHighlightedText, style, ...props }) { const chunks = findAll({textToHighlight, searchWords, sanitize, autoEscape}); return ( - + {chunks.map((chunk, index) => { const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); - return (!chunk.highlight) ? text : ( onPressHighlightedText(text)} key={index} style={chunk.highlight && highlightStyle} > diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..4b1acc6 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,40 @@ +{ + "name": "react-native-highlight-words", + "version": "1.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "highlight-words-core": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz", + "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "prop-types": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", + "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + } + } +} diff --git a/package.json b/package.json index 8d99126..22c8be4 100644 --- a/package.json +++ b/package.json @@ -1,40 +1,40 @@ { - "name": "react-native-highlight-words", - "version": "1.0.1", - "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "https://github.com/clauderic/react-native-highlight-words.git" - }, - "keywords": [ - "react-native", - "react", - "reactjs", - "react-component", - "highlighter", - "highlight", - "text", - "words", - "matches", - "substring", - "occurrences", - "search" - ], - "author": "Clauderic Demers", - "license": "MIT", - "bugs": { - "url": "https://github.com/clauderic/react-native-highlight-words/issues" - }, - "homepage": "https://github.com/clauderic/react-native-highlight-words", - "dependencies": { - "highlight-words-core": "^1.0.3", - "prop-types": "^15.5.7" - }, - "peerDependencies": { - "react": "^15.5.0 || ^16" - } + "name": "rn-highlight-words", + "version": "1.1.0", + "description": "A React Native port of react-highlight-words. This component is used to highlight words within a larger body of text.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/adityasonel/rn-highlight-words.git" + }, + "keywords": [ + "react-native", + "react", + "reactjs", + "react-component", + "highlighter", + "highlight", + "text", + "words", + "matches", + "substring", + "occurrences", + "search" + ], + "author": "Aditya Sonel", + "license": "MIT", + "bugs": { + "url": "https://github.com/adityasonel/rn-highlight-words/issues" + }, + "homepage": "https://github.com/adityasonel/rn-highlight-words", + "dependencies": { + "highlight-words-core": "^1.0.3", + "prop-types": "^15.5.7" + }, + "peerDependencies": { + "react": "^15.5.0 || ^16" + } } diff --git a/sample.gif b/sample.gif new file mode 100644 index 0000000..9098005 Binary files /dev/null and b/sample.gif differ