# react-native-hyperlinks

> A simple and customizable library to display hyperlinks in React Native

Latest version **1.0.4** (published 2023-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-hyperlinks
pnpm add react-native-hyperlinks
yarn add react-native-hyperlinks
bun add react-native-hyperlinks
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-01-05 |
| First published | 2022-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | André Ribeiro |
| Maintainers | andresribeiro |
| Keywords | react-native, react, link, links, hyperlink, hyperlinks, hyper-link, hypertext, hypertext, rn, typescript |

## Links

- npm: https://www.npmjs.com/package/react-native-hyperlinks
- Repository: https://github.com/andresribeiro/react-native-hyperlinks
- Homepage: https://github.com/andresribeiro/react-native-hyperlinks#readme
- Issues: https://github.com/andresribeiro/react-native-hyperlinks/issues
- npm.io page: https://npm.io/package/react-native-hyperlinks

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2023-01-05
- 1.0.3 — 2023-01-05
- 1.0.2 — 2022-12-30
- 1.0.1 — 2022-12-30
- 1.0.0 — 2022-12-30

## 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

<img alt="Without this library vs with this library" src="assets/screenshot.jpg" width="500"/>

### About 🗞️

Uses [linkify-it](https://github.com/markdown-it/linkify-it) under the hood. Created for my social network app, [Drakkle](https://play.google.com/store/apps/details?id=com.andresribeiro.drakkle)

### 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 (
    <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`

---
_Source: https://npm.io/package/react-native-hyperlinks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._