{"id":26829987,"url":"https://github.com/farhoudshapouran/react-native-highlighter","last_synced_at":"2025-04-30T06:25:37.639Z","repository":{"id":148390308,"uuid":"619277739","full_name":"farhoudshapouran/react-native-highlighter","owner":"farhoudshapouran","description":"A library for 🌈 highlighting specific contents and enabling interaction with them.","archived":false,"fork":false,"pushed_at":"2024-07-17T09:17:54.000Z","size":936,"stargazers_count":59,"open_issues_count":4,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T19:23:24.989Z","etag":null,"topics":["android","highlight","ios","keywords","react-native","react-native-web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farhoudshapouran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-26T19:19:36.000Z","updated_at":"2025-04-01T22:26:44.000Z","dependencies_parsed_at":"2024-07-17T11:39:38.125Z","dependency_job_id":null,"html_url":"https://github.com/farhoudshapouran/react-native-highlighter","commit_stats":null,"previous_names":["farhoudshapouran/react-native-highlighter","farhoodme/react-native-highlighter"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farhoudshapouran%2Freact-native-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farhoudshapouran","download_url":"https://codeload.github.com/farhoudshapouran/react-native-highlighter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251652927,"owners_count":21622039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","highlight","ios","keywords","react-native","react-native-web"],"created_at":"2025-03-30T13:29:23.866Z","updated_at":"2025-04-30T06:25:37.604Z","avatar_url":"https://github.com/farhoudshapouran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![react-native-highlighter](https://user-images.githubusercontent.com/7857656/227882432-2d18c750-5c96-4838-8dfd-62bd44cfa18f.jpg)\n\n# react-native-highlighter\n\nA library for highlight what you want and interact with them\n\n## Installation\n\n```sh\nnpm install react-native-highlighter\n```\n\nOR\n\n```sh\nyarn add react-native-highlighter\n```\n\n## Basic Usage\n\n```js\nimport HighlightedText, { Highlight } from 'react-native-highlighter';\n\nexport default function App() {\n  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.`;\n\n  const mainKeywords = new Highlight({\n    keywords: ['react native', 'javascript'],\n    style: { color: '#6C00FF', fontWeight: 'bold' },\n  });\n\n  const extraMarkers = new Highlight({\n    keywords: ['user interface', 'highlight'],\n    style: { backgroundColor: '#F7DB6A' },\n  });\n\n  return (\n    \u003cHighlightedText highlights={[mainKeywords, extraMarkers]}\u003e\n      {text}\n    \u003c/HighlightedText\u003e\n  );\n}\n// ...\n```\n\n## Full Example\n\n```js\nimport { StyleSheet, Linking } from 'react-native';\nimport HighlightedText, { Highlight } from 'react-native-highlighter';\n\nexport default function App() {\n  const text = `React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.\nUse 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.\nFor more please visit https://reactnative.dev or read latest posts from @reactnative.\n\n#react #reactnative #javascript`;\n\n  const mainKeywords = new Highlight({\n    keywords: ['react native', 'javascript'],\n    style: { color: '#6C00FF', fontWeight: 'bold' },\n    onPress: (keyword) =\u003e Alert.alert(keyword),\n  });\n\n  const extraMarkers = new Highlight({\n    keywords: ['user interface', 'highlight'],\n    style: { backgroundColor: '#F7DB6A' },\n    onPress: () =\u003e {},\n  });\n\n  return (\n    \u003cHighlightedText\n      highlights={[mainKeywords, extraMarkers]}\n      caseSensitive={false}\n      hashtags={true}\n      hashtagStyle={styles.hashtagStyle}\n      mentions={true}\n      mentionStyle={styles.mentionStyle}\n      onMentionPress={(mention) =\u003e\n        Linking.openURL(`https://twitter.com/${mention.replace('@', '')}`)\n      }\n      emails={true}\n      emailStyle={styles.emailStyle}\n      onEmailPress={(email) =\u003e Linking.openURL(`mailto:${email}`)}\n      links={true}\n      onLinkPress={(url) =\u003e Linking.openURL(url)}\n    \u003e\n      {text}\n    \u003c/HighlightedText\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  hashtagStyle: { color: '#F54291' },\n  mentionStyle: { color: '#379237', fontWeight: 'bold' },\n  emailStyle: { color: '#FF6D28', fontWeight: 'bold' },\n});\n// ...\n```\n\n## Available props\n\n\n| Name                     | Type            |   Default           | Description                                                                |\n| ------------------------ | --------------- | ------------------- | ---------------------------------------------------------------------------|\n| highlights               | `Highlight[]`   | `null`              | Array of Highlight object                                                  |\n| caseSensitive            | `boolean`       | `false`             | Defines that uppercase and lowercase letters are treated as distinct       |    \n| style                    | `TextStyle`     | `null`              | Defines the style of text |\n| hashtags                 | `boolean`       | `false`             | Defines that all hashtags within the text are specified                    |\n| hashtagStyle             | `TextStyle`     | `{ color: 'blue' }` | Defines the style of hashtags |\n| onHashtagPress           | `func`          | `() =\u003e {}`          | Defines what action to take when pressing on the hashtags |\n| mentions                 | `boolean`       | `false`             | Defines that all mentions within the text are specified |\n| mentionStyle             | `TextStyle`     | `{ color: 'blue' }` | Defines the style of mentions |\n| onMentionPress           | `func`          | `() =\u003e {}`          | Defines what action to take when pressing on the mentions |\n| emails                   | `boolean`       | `false`             | Defines that all emails within the text are specified |\n| emailStyle               | `TextStyle`     | `{ color: 'blue' }` | Defines the style of emails |\n| onEmailPress             | `func`          | `() =\u003e {}`          | Defines what action to take when pressing on the emails |\n| links                    | `boolean`       | `false`             | Defines that all links within the text are specified |\n| linkStyle                | `TextStyle`     | `{ color: 'blue' }` | Defines the style of links |\n| onLinkPress              | `func`          | `() =\u003e {}`          | Defines what action to take when pressing on the links |\n\n\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarhoudshapouran%2Freact-native-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarhoudshapouran%2Freact-native-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarhoudshapouran%2Freact-native-highlighter/lists"}