3

A simple and customizable library to display hyperlinks in React Native

 1 year ago
source link: https://reactnativeexample.com/a-simple-and-customizable-library-to-display-hyperlinks-in-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

Without this library vs with this library

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

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK