https://github.com/andresribeiro/react-native-hyperlinks

A simple and customizable library to display hyperlinks in React Native
https://github.com/andresribeiro/react-native-hyperlinks

fuzzy-links hashtag hyperlink hyperlinks hypertext link mention react-native url

Last synced: 3 months ago
JSON representation

A simple and customizable library to display hyperlinks in React Native

• Host: GitHub
• URL: https://github.com/andresribeiro/react-native-hyperlinks
• Owner: andresribeiro
• License: mit
• Created: 2022-12-30T14:37:47.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-27T17:53:00.000Z (about 1 year ago)
• Last Synced: 2024-09-29T11:45:24.519Z (3 months ago)
• Topics: fuzzy-links, hashtag, hyperlink, hyperlinks, hypertext, link, mention, react-native, url
• Language: TypeScript
• Homepage:
• Size: 96.7 KB
• Stars: 27
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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](https://github.com/markdown-it/linkify-it) under the hood. Created for my social network app, [Rybun](https://rybun.com)

### Installation ⚙️

```bash

yarn add react-native-hyperlinks linkify-it

```

### Usage 🔨

```tsx

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 (

    

  );

}

```

### Props ✍️

| Property | Default | Type | Required

| ---- | ---- | ---- | ----

| `text` | `undefined` | `string` | `true`

| `hyperlinkStyle` | `undefined` | `StyleProp` | `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`