# rn-text-with-link

> Create simple text component with hyperlink in React Native

Latest version **0.1.0** (published 2021-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-text-with-link
pnpm add rn-text-with-link
yarn add rn-text-with-link
bun add rn-text-with-link
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-01-06 |
| First published | 2021-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | jopemachine |
| Maintainers | jopemachine |
| Keywords | react-native, react native, text, hyperlink, link |

## Links

- npm: https://www.npmjs.com/package/rn-text-with-link
- Repository: https://github.com/jopemachine/rn-text-with-link
- Homepage: https://github.com/jopemachine/rn-text-with-link#readme
- Issues: https://github.com/jopemachine/rn-text-with-link/issues
- npm.io page: https://npm.io/package/rn-text-with-link

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-01-06
- 0.0.8 — 2021-01-03
- 0.0.7 — 2021-01-03
- 0.0.6 — 2021-01-03
- 0.0.5 — 2021-01-03
- 0.0.4 — 2021-01-03
- 0.0.3 — 2021-01-01
- 0.0.2 — 2021-01-01
- 0.0.1 — 2021-01-01

## README

# rn-text-with-link
<img src="https://img.shields.io/github/license/jopemachine/rn-text-with-link.svg" alt="License">

Create simple text component with hyperlink in React Native

<img src="./demo.gif" width="30%" height="30%">

## Install

```
npm i rn-text-with-link
```

## Example

Check [App.js](https://github.com/jopemachine/rn-text-with-link/blob/main/Example/App.js) in the Example folder.

## API

### TextWithLink

#### text: `string`

Enter text through this.

urls could be represented by like this way. `[label](url)`

Example:

```js
import TextWithLink from 'rn-text-with-link';

...

<TextWithLink
  text={
     'You acknowledge that you have read the [Privacy Policy](https://some_privacy_policy.com)'
  }
/>

```

#### style?: `StyleProp<TextStyle>`

Style of normal text which not contains hyperlink

#### linkStyle?: `StyleProp<TextStyle>`

The style of hyperlink text.

#### callback?: `(url: string) => void | CallbackTable`

1) `Function` type : Callback function of onPressEvent of hyperlink.

You can simply put `!` in the url's place if you don't need to use url in your custom callback.

```js
import TextWithLink from 'rn-text-with-link';

...

const gotoSignUpScreen = () => {
  ...
};

...

<TextWithLink
  text={"Don't have an account? [Sign up](!)"}
  callback={gotoSignUpScreen}
/>

```


2) `CallbackTable` type (Object type)

It could be useful when you want to bind a different callback function to a particular "link".

You can simply put `!` in the url's place if you don't need to use url in your custom callback.

Example:

```js
import TextWithLink from 'rn-text-with-link';

...

const handleSignIn = () => {
  ...
};

const gotoSignUpScreen = () => {
  ...
};

...

<TextWithLink
  text={"[Sign in](!) \nDon't have an account? [Sign up](!)"}
  callback={{
    'Sign in': handleSignIn,
    'Sign up': gotoSignUpScreen,
  }}
/>

```

---
_Source: https://npm.io/package/rn-text-with-link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._