andresribeiro/react-native-hyperlinks

A simple and customizable library to display hyperlinks in React Native

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, Rybun

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