Giter VIP home page Giter VIP logo

react-native-highlight-words's Introduction

React Native Highlight Words

React Native component used to highlight words within a larger body of text. This is a port of react-highlight-words.

Check out a demo using Exponent.

Installation

Using npm:

npm i --save react-native-highlight-words

Usage

To use it, just provide it with an array of search terms and a body of text to highlight:

import Highlighter from 'react-native-highlight-words';

<Highlighter
  highlightStyle={{backgroundColor: 'yellow'}}
  searchWords={['and', 'or', 'the']}
  textToHighlight='The dog is chasing the cat. Or perhaps they're just playing?'
/>

And the Highlighter component will highlight all occurrences of search terms within the text:

screen shot 2015-12-19 at 8 23 43 am

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

License

MIT License - fork, modify and use however you want.

react-native-highlight-words's People

Contributors

schneidmaster avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-highlight-words's Issues

Scrollto highlight word

Hello, I want to use this package to find words dynamically and I don t know to get position of highlighted word to use scrollTo.

"Warning: PropTypes has been moved to a separate package"... in RN 0.45 - 0.47

A lingering warning still on RN 0.47.1:

ExceptionsManager.js:73 Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)
reactConsoleErrorHandler @ ExceptionsManager.js:73
printWarning @ warning.js:35
warning @ warning.js:59
get @ react.development.js:2133
(anonymous) @ index.js:101
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ index.js:1
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ components.js:30
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:126
_require @ require.js:110
(anonymous) @ index.ios.js:88
loadModuleImplementation @ require.js:174
guardedLoadModule @ require.js:119
_require @ require.js:110
(anonymous) @ redux-logger.js:1
executeApplicationScript @ debuggerWorker.js:40
(anonymous) @ debuggerWorker.js:65

screenshot 2017-08-03 20 21 15
In [project]/node_modules/react-native-highlight-words/index.js, the index.js referenced in above log:
screenshot 2017-08-05 12 01 28

Expose React Native <Text/> props to highlighted words

Hi!
Thanks for an awesome package. However, it would be even more awesome if the option to pass down the text props that should be applied to the text wrapper. One issue we have now is that the allowFontScaling prop never takes effect on the highlighted word (props are only passed down to the parent Text wrapper. Maybe another prop on the component called "highLightProps" or similar can be introduced?

Reference: https://facebook.github.io/react-native/docs/text.html#allowfontscaling

Release new version

H there!

I see that support for React 16 was added. Thank you!
It would be great if it can be released on NPM so we can upgrade.

Thank you for an awesome module!

buf if word start with "+" char

hello.

There is a bug if the text to higliht start with a "+"
for example

const display = "+ Laburnocytisus adami" ;

<Highlighter
    highlightStyle={thisstyles.highlighter}
    searchWords={[this.state.valueForModal]}
    textToHighlight={display}
    style={thisstyles.fontSize15}
 />

return this error :

   SyntaxError: SyntaxError: Invalid regular expression: /+/: Nothing to repeat

any idea to fix it ? thx

ERROR TypeError: undefined is not an object (evaluating '_reactNative.Text.propTypes.style') in react native 0.70

Hi! ๐Ÿ‘‹

Firstly, thanks for your work on this project! ๐Ÿ™‚

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-highlight-words/index.js b/node_modules/react-native-highlight-words/index.js
index e15cc90..15f0b34 100644
--- a/node_modules/react-native-highlight-words/index.js
+++ b/node_modules/react-native-highlight-words/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import {Text} from 'react-native';
 import {findAll} from 'highlight-words-core';
 import PropTypes from 'prop-types';
+import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
 Highlighter.propTypes = {
     autoEscape: PropTypes.bool,
-    highlightStyle: Text.propTypes.style,
+    highlightStyle: TextPropTypes.style,
     searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     textToHighlight: PropTypes.string.isRequired,
     sanitize: PropTypes.func,
-    style: Text.propTypes.style
+    style: TextPropTypes.style
 };
 
 /**

This issue body was partially generated by patch-package.

Implement to <Textarea>

Thanks for nice package, it's useful for my app. But, actually my app use <Textarea> for input/output some text. How to implement or maybe combine this package to <Textarea> component?

Sorry my bad english, hopefully you understand my question ^^

How could I just highlight the exat word?

Hi, thanks for such an awesome package, I am looking for a way that I could highlight the exact word in the searchWords property, for example, the value of the textToHighlight is "form and the searchWords is for what if do not want to highlight the first three letters in the text but I want to highlight the searchWords values only and only if it comes as exact as it is in searchWords

thanks in advance

Update the package to use deprecated-react-native-prop-types and keep compatibility with react native 0.69.x

Hi! ๐Ÿ‘‹

Firstly, thanks for your work on this project! ๐Ÿ™‚

Today I used patch-package to patch [email protected] for the project I'm working on.

This package stopped working after upgrading react native to 0.69 due to ViewPropTypes being deprecated and removed from react native. Updating the package to use "deprecated-react-native-prop-types" resolved the issue.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-highlight-words/index.js b/node_modules/react-native-highlight-words/index.js
index e15cc90..4dab0dc 100644
--- a/node_modules/react-native-highlight-words/index.js
+++ b/node_modules/react-native-highlight-words/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import {Text} from 'react-native';
 import {findAll} from 'highlight-words-core';
 import PropTypes from 'prop-types';
+import  { TextPropTypes} from 'deprecated-react-native-prop-types';
 
 Highlighter.propTypes = {
     autoEscape: PropTypes.bool,
-    highlightStyle: Text.propTypes.style,
+    highlightStyle: TextPropTypes.style,
     searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
     textToHighlight: PropTypes.string.isRequired,
     sanitize: PropTypes.func,
-    style: Text.propTypes.style
+    style: TextPropTypes.style
 };
 
 /**

This issue body was partially generated by patch-package.

Apply multiple styles

Hi guys!

I'm trying to highlight multiple words, but some of them need to have a different color, just like this:
screen shot 2017-05-17 at 14 09 33

For now I can only get the red part to work. Do you know how can I also add the blue part?

chore: add ts support

In my current project, we're using Typescript. So, to add support to this package I needed to add a file .d.ts with type-checks.

If you guys believe that it could be a good idea adding an index.d.ts file into this project I can contribute doing this.

Add multiple styles to other words

const text = "What do you do after school? I do aerobics after school."
<Text>
     <Highlighter
           highlightStyle={{ color: 'red' }}
           searchWords={["What", "do"]}
           textToHighlight={text}
     />
</Text>

This something i wanted to achieve

90327d00-3b0a-11e7-9469-e2aa8b13bb8a

Please add autoEscape={true} in README

Hi. Thank you for the package.
Please add autoEscape={true} in README Usage example. I think it will be useful.

Why is autoEscape default value false?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.