1.0.4 • Published 1 year ago
react-native-hyperlinks v1.0.4
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 |