react-native-highlighter

A library for highlight what you want and interact with them

Installation

npm install react-native-highlighter

OR

yarn add react-native-highlighter

Basic Usage

import HighlightedText, { Highlight } from 'react-native-highlighter';

export default function App() {
  const text = `React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.`;

  const mainKeywords = new Highlight({
    keywords: ['react native', 'javascript'],
    style: { color: '#6C00FF', fontWeight: 'bold' },
  });

  const extraMarkers = new Highlight({
    keywords: ['user interface', 'highlight'],
    style: { backgroundColor: '#F7DB6A' },
  });

  return (
    <HighlightedText highlights={[mainKeywords, extraMarkers]}>
      {text}
    </HighlightedText>
  );
}
// ...

Full Example

import { StyleSheet, Linking } from 'react-native';
import HighlightedText, { Highlight } from 'react-native-highlighter';

export default function App() {
  const text = `React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.
Use a little—or a lot. You can use React Native today in your existing Android and iOS projects or you can create a whole new app from scratch.
For more please visit https://reactnative.dev or read latest posts from @reactnative.

#react #reactnative #javascript`;

  const mainKeywords = new Highlight({
    keywords: ['react native', 'javascript'],
    style: { color: '#6C00FF', fontWeight: 'bold' },
    onPress: (keyword) => Alert.alert(keyword),
  });

  const extraMarkers = new Highlight({
    keywords: ['user interface', 'highlight'],
    style: { backgroundColor: '#F7DB6A' },
    onPress: () => {},
  });

  return (
    <HighlightedText
      highlights={[mainKeywords, extraMarkers]}
      caseSensitive={false}
      hashtags={true}
      hashtagStyle={styles.hashtagStyle}
      mentions={true}
      mentionStyle={styles.mentionStyle}
      onMentionPress={(mention) =>
        Linking.openURL(`https://twitter.com/${mention.replace('@', '')}`)
      }
      emails={true}
      emailStyle={styles.emailStyle}
      onEmailPress={(email) => Linking.openURL(`mailto:${email}`)}
      links={true}
      onLinkPress={(url) => Linking.openURL(url)}
    >
      {text}
    </HighlightedText>
  );
}

const styles = StyleSheet.create({
  hashtagStyle: { color: '#F54291' },
  mentionStyle: { color: '#379237', fontWeight: 'bold' },
  emailStyle: { color: '#FF6D28', fontWeight: 'bold' },
});
// ...

Available props

| Name | Type | Default | Description | | ------------------------ | --------------- | ------------------- | ---------------------------------------------------------------------------| | highlights | Highlight[] | null | Array of Highlight object | | caseSensitive | boolean | false | Defines that uppercase and lowercase letters are treated as distinct |
| style | TextStyle | null | Defines the style of text | | hashtags | boolean | false | Defines that all hashtags within the text are specified | | hashtagStyle | TextStyle | { color: 'blue' } | Defines the style of hashtags | | onHashtagPress | func | () => {} | Defines what action to take when pressing on the hashtags | | mentions | boolean | false | Defines that all mentions within the text are specified | | mentionStyle | TextStyle | { color: 'blue' } | Defines the style of mentions | | onMentionPress | func | () => {} | Defines what action to take when pressing on the mentions | | emails | boolean | false | Defines that all emails within the text are specified | | emailStyle | TextStyle | { color: 'blue' } | Defines the style of emails | | onEmailPress | func | () => {} | Defines what action to take when pressing on the emails | | links | boolean | false | Defines that all links within the text are specified | | linkStyle | TextStyle | { color: 'blue' } | Defines the style of links | | onLinkPress | func | () => {} | Defines what action to take when pressing on the links |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT