{"id":4415,"url":"https://github.com/obipawan/react-native-hyperlink","last_synced_at":"2025-10-06T05:17:45.002Z","repository":{"id":45734247,"uuid":"56509524","full_name":"obipawan/react-native-hyperlink","owner":"obipawan","description":"A \u003cHyperlink /\u003e component for react-native that makes urls, fuzzy links, emails etc clickable","archived":false,"fork":false,"pushed_at":"2025-02-14T10:18:28.000Z","size":4400,"stargazers_count":809,"open_issues_count":11,"forks_count":78,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-12T17:19:57.067Z","etag":null,"topics":["autolink","fuzzy-links","hyperlink","link","react","react-native","react-native-web","text","url"],"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/obipawan.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":"2016-04-18T13:21:50.000Z","updated_at":"2025-05-06T02:48:59.000Z","dependencies_parsed_at":"2025-04-10T06:18:40.801Z","dependency_job_id":"fd70f226-94e4-4bd7-bc43-7e1b19c311fa","html_url":"https://github.com/obipawan/react-native-hyperlink","commit_stats":null,"previous_names":["obipawan/hyperlink"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obipawan%2Freact-native-hyperlink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obipawan%2Freact-native-hyperlink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obipawan%2Freact-native-hyperlink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/obipawan%2Freact-native-hyperlink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/obipawan","download_url":"https://codeload.github.com/obipawan/react-native-hyperlink/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010792,"owners_count":21998993,"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":["autolink","fuzzy-links","hyperlink","link","react","react-native","react-native-web","text","url"],"created_at":"2024-01-05T20:17:11.208Z","updated_at":"2025-10-06T05:17:39.981Z","avatar_url":"https://github.com/obipawan.png","language":"TypeScript","readme":"# react-native-hyperlink\n[![NPM version](https://badge.fury.io/js/react-native-hyperlink.svg)](http://badge.fury.io/js/react-native-hyperlink) [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/jondot/awesome-react-native#text--rich-content)\n\nA `\u003cHyperlink /\u003e` component for [react-native](http://facebook.github.io/react-native/) \u0026 [react-native-web](https://github.com/necolas/react-native-web) that makes urls, fuzzy links, emails etc clickable\n\n![demo](https://cdn.rawgit.com/obipawan/hyperlink/master/asset/screen.gif)\n\n## Installation\n```sh\nnpm i --save react-native-hyperlink\n```\n\n## Props\n| name | desc | type | default\n| --- | --- | --- | --- |\n| `linkify` | [linkify-it](http://markdown-it.github.io/linkify-it/doc/) object, for custom schema  | `object` | `require('linkify-it')()`\n| `linkStyle` | highlight clickable text with styles | `Text.propTypes.style` |\n| `linkText` | A string or a func to replace parsed text | `oneOfType([ string, func ])` |\n| `onPress` | Func to handle click over a clickable text with parsed text as arg | `func` |\n| `onLongPress` | Func to handle long click over a clickable text with parsed text as arg | `func` |\n|`linkDefault`|A platform specific fallback to handle `onPress`. Uses [Linking](https://facebook.github.io/react-native/docs/linking.html). Disabled by default | `bool`\n|`injectViewProps`| Func with url as a param to inject props to the clickable component | `func` | `i =\u003e ({})`\n\n## Examples\nWrap any component that has `\u003cText\u003e` (works for [nested ](https://facebook.github.io/react-native/docs/text.html#nested-text) text too) in it\n\n```jsx\nimport Hyperlink from 'react-native-hyperlink'\n\nexport const defaultLink = () =\u003e\n  \u003cHyperlink linkDefault={ true }\u003e\n    \u003cText style={ { fontSize: 15 } }\u003e\n      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.\n    \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n\nexport const regularText = () =\u003e\n  \u003cHyperlink onPress={ (url, text) =\u003e alert(url + \", \" + text) }\u003e\n    \u003cText style={ { fontSize: 15 } }\u003e\n      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.\n    \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n\nexport const regularTextLongPress = () =\u003e\n  \u003cHyperlink onLongPress={ (url, text) =\u003e alert(url + \", \" + text) }\u003e\n    \u003cText style={ { fontSize: 15 } }\u003e\n      This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable for long click.\n    \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n\nexport const nestedText = () =\u003e\n  \u003cHyperlink onPress={ (url, text) =\u003e alert(url + \", \" + text) }\u003e\n    \u003cView\u003e\n      \u003cText style={ { fontSize: 15 } }\u003e\n        A nested Text component https://facebook.github.io/react-native/docs/text.html works equally well \u003cText\u003ewith https://github.com/obipawan/hyperlink\u003c/Text\u003e\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/Hyperlink\u003e\n\nexport const highlightText = () =\u003e\n  \u003cHyperlink linkStyle={ { color: '#2980b9', fontSize: 20 } }\u003e\n    \u003cText style={ { fontSize: 15 } }\u003e\n      Make clickable strings like https://github.com/obipawan/hyperlink stylable\n    \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n\nexport const parseAndReplace = () =\u003e\n  \u003cHyperlink\n    linkStyle={ { color: '#2980b9', fontSize: 20 } }\n    linkText={ url =\u003e url === 'https://github.com/obipawan/hyperlink' ? 'Hyperlink' : url }\n  \u003e\n    \u003cText style={ { fontSize: 15 } }\u003e\n      Make clickable strings cleaner with https://github.com/obipawan/hyperlink\n    \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n\nexport const passPropsText = () =\u003e\n  \u003cHyperlink\n    linkDefault\n    injectViewProps={ url =\u003e ({\n          testID: url === 'http://link.com' ? 'id1' : 'id2' ,\n          style: url === 'https://link.com' ? { color: 'red' } : { color: 'blue' },\n          //any other props you wish to pass to the component\n    }) }\n  \u003e\n    \u003cText\u003eYou can pass props to clickable components matched by url.\n        \u003cText\u003eThis url looks red https://link.com\n    \u003c/Text\u003e and this url looks blue https://link2.com \u003c/Text\u003e\n  \u003c/Hyperlink\u003e\n```\n\n### Dependenies\n [linkify-it](https://github.com/markdown-it/linkify-it)\n### Development\n\nPRs highly appreciated\n\nLicense\n----\nMIT License\n","funding_links":[],"categories":["Components","TypeScript"],"sub_categories":["Text \u0026 Rich Content"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobipawan%2Freact-native-hyperlink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fobipawan%2Freact-native-hyperlink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fobipawan%2Freact-native-hyperlink/lists"}