react-native-hyperlinks
v1.0.4
Published
A simple and customizable library to display hyperlinks in React Native
Downloads
249
Maintainers
Readme
A simple and customizable library to display hyperlinks in React Native
Features ✨
- 🛑 Automatic detection for links, mentions and hashtags
- 🔤 Full unicode support
- 🌐 International domains support
- 💅 Custom hyperlink style
- ⚙️ Custom linkify-it instance
- 📦 Tiny
- 🚀 Created with Typescript
About 🗞️
Uses linkify-it under the hood. Created for my social network app, Drakkle
Installation ⚙️
yarn add react-native-hyperlinks linkify-it
Usage 🔨
import React from "react";
import { Linking } from "react-native";
import Hyperlinks from "react-native-hyperlinks";
export default function App() {
function handleOnLinkPress(link: string) {
console.log(link)
}
function handleOnMentionPress (username: string) {
console.log(username)
}
function handleOnHashtagPress (tag: string) {
console.log(tag)
}
return (
<Hyperlinks
text="Hello!! @andresribeiro #hi https://duck.com aaaaa"
style={{ fontSize: 18 }}
hyperlinkStyle={{ color: 'purple' }}
onLinkPress={handleOnLinkPress}
onMentionPress={handleOnMentionPress}
onHashtagPress={handleOnHashtagPress}
/>
);
}
Props ✍️
| Property | Default | Type | Required
| ---- | ---- | ---- | ----
| text
| undefined
| string
| true
| hyperlinkStyle
| undefined
| StyleProp<TextStyle>
| false
| autoDetectMentions
| true
| boolean
| false
| autoDetectHastags
| true
| boolean
| false
| customHyperlinks
| undefined
| CustomHyperlink[]
| false
| onLinkPress
| undefined
| (link: string) => unknown
| false
| onMentionPress
| undefined
| (username: string) => unknown
| false
| onHashtagPress
| undefined
| (tag: string) => unknown
| false
| onCustomHyperlinkPress
| undefined
| (hyperlink: CustomHyperlink) => unknown
| false
| linkify
| linkifyIt()
| linkifyIt.LinkifyIt
| false