react-linky

KO | EN

gitlite — search

#python #javascript #python3 #java #flutter #android #deep-learning #machine-learning #react #typescript #laravel #php

★ 66 Open GitHub ↗

A React component to find URLs and Emails in text and turn them into html links

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React-linky

[![Build Size](https://img.shields.io/bundlephobia/minzip/react-linky?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=react-linky)
[![Version](https://img.shields.io/npm/v/react-linky?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/react-linky)
[![Downloads](http://img.shields.io/npm/dt/react-linky?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/react-linky)

A minimal and tiny React component to find links in text and to turn them into HTML hyperlinks. It gets all kinds of URLs in a simple text and converts them to HTML hyperlink in react. it also supports finding email addresses in the text and convert them to a mailto: hyperlink. It also writes in TypeScript so has its types with itself. And all these features with less than a KB.

You can try a live demo [here](https://codesandbox.io/s/react-linky-1kq1w).

## Installation

yarn add react-linky

npm i react-linky

## Usage

Simple usage:

```es6
<Linky>
 If you enjoy the project just visit github.com/react-linky/ and give a start
 to `react-linky` ;)
</Linky>
```

Nested elements:
`react-linky` also supports nested elements and it converts every string url to a link.

```es6
<Linky>
 <h2>
 react-linky (github.com/slasharash/react-linky)
 </h2>
 
 A minimal and tiny React component to find links in text and to turn them
 into html links
 
 
 github is a like a 127.0.0.1 for us. Now you should know that it
 supports ip addresses too
 
 
 it also supports urls with http, like: https://github.com or
 http://github.com
 
 
 feel free to email me: slasharash@protonmail.com
 
</Linky>
```

Email:
By default, `react-linky` converts every email to a hyperlink but you can change its behavior by passing a boolean value to the `email` prop.

```es6
<Linky email={false}>
 this email will not convert to a link: slasharash@protonmail.com
</Linky>
```

## Options

react-linky

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README