https://github.com/anantoghosh/react-linkify-it
A tiny react package that turns urls (with i18n and emoji support), emails, jira tickets, twitter handles, anything you want! in your text clickable (aka linkify).
https://github.com/anantoghosh/react-linkify-it
autolink link linkify react react-linkify tag text url
Last synced: 10 months ago
JSON representation
A tiny react package that turns urls (with i18n and emoji support), emails, jira tickets, twitter handles, anything you want! in your text clickable (aka linkify).
- Host: GitHub
- URL: https://github.com/anantoghosh/react-linkify-it
- Owner: anantoghosh
- License: mit
- Created: 2021-06-23T17:32:43.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-08-13T16:51:13.000Z (10 months ago)
- Last Synced: 2025-08-16T20:49:09.105Z (10 months ago)
- Topics: autolink, link, linkify, react, react-linkify, tag, text, url
- Language: TypeScript
- Homepage:
- Size: 619 KB
- Stars: 56
- Watchers: 1
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-linkify-it 🔗
[](https://www.npmjs.com/package/react-linkify-it)
[](https://github.com/anantoghosh/react-linkify-it/actions/workflows/node.js.yml)
[](https://bundlephobia.com/package/react-linkify-it)
[](https://codeclimate.com/github/anantoghosh/react-linkify-it/maintainability)
[](https://codeclimate.com/github/anantoghosh/react-linkify-it/test_coverage)
[](https://snyk.io/test/github/anantoghosh/react-linkify-it)
[](https://snyk.io/advisor/npm-package/react-linkify-it)
A tiny and dependency free universal linking solution that turns **any pattern** in your text into clickable links (aka linkify). Supports i18n and emojis.
`react-linkify-it` comes with a set of prebuilt components for specific linking needs and a generic component to wrap any pattern with a component.
Prebuilt components for linking:
- URLs
- Jira Tickets
- Twitter usernames
- Emails
You can also use the generic component which lets you support your own use case as desired:
- Link GitHub Issues
- Link tags to any social media
- Link email addresses
- Link phone numbers
- **Link any pattern you want!**
- **Wrap any pattern with a component!**
### Features
- 📦 **Tiny** - Less than 800 bytes gzipped after tree shaking.
- 🔹 **Dependency free** - No extra dependencies. Just a single file.
- 📝 **Customizable** - Adjust to your specific case as required.
- 💧 **Generic** - Not just links, wrap any pattern with _any_ component.
- 🏎 **Fast** - Single pass processing.
- 🦺 **Safe** - Sanitized urls to prevent any XSS attacks.
- 🌐 **i18n** - Works with urls that contain international characters.
- ⚔ **Tested** - Thoroughly.
- 🕸 **React support** - Works with react v16.2+
### Notes
- `react-linkify-it` provides a modern bundle for actively maintained browsers and a larger legacy bundle for older browsers.
[Read about how to utilize them](#using-modern-and-legacy-bundle).
## Demo
[Code Sandbox](https://codesandbox.io/s/react-linkify-it-c5n82g)
## Installation
```sh
npm i react-linkify-it
```
### Usage - Prebuilt Components
_Every prebuilt component also optionally accepts a `className` to attach to the link wrapper_
#### 1. Urls
```jsx
import { LinkItUrl } from 'react-linkify-it';
const App = () => (
"add some link https://www.google.com here"
);
```
#### 2. Jira Tickets
```jsx
import { LinkItJira } from 'react-linkify-it';
const App = () => (
hello AMM-123 ticket
);
```
#### 3. Twitter handles
```jsx
import { LinkItTwitter } from 'react-linkify-it';
const App = () => (
hello @anantoghosh twitter
);
```
#### 4. Emails
```jsx
import { LinkItEmail } from 'react-linkify-it';
const App = () => (
hello example@gmail.com email
);
```
### Usage - Generic Component
```jsx
import { LinkIt } from 'react-linkify-it';
const regexToMatch = /@([\w_]+)/;
const App = () => (
);
```
- **match** - regex match text
- **key** - unique key for the match
### Usage - Generic Function
```jsx
import { linkIt, UrlComponent } from 'react-linkify-it';
const regexToMatch = /@([\w_]+)/;
const App = () => {
const output = linkIt(
// Text to be linkified
text,
// Component to wrap each match with, can be any React component
(match, key) => ,
regexToMatch
);
return
{output}
};
```
- **match** - regex match text
- **key** - unique key for the match
### Using multiple matches
Just use more than one component to match multiple patterns.
```jsx
import { LinkItEmail, LinkItUrl } from 'react-linkify-it';
const App = () => (
hello example@gmail.com https://google.com
);
```
## Using modern and legacy bundle
By default, when you import `react-linkify-it`, it will use a modern bundle
meant for browsers which
support [RegExp Unicode property escapes](https://caniuse.com/mdn-javascript_regular_expressions_property_escapes).
If you are using `babel-preset-env`, or any bundler configuration which uses it (e.g. `create-react-app`, `vite`) with a
browser which does not support RegExp Unicode property escapes, babel will
transform the code to support the browsers resulting in a larger bundle.
If your setup does not use `babel-preset-env` and you would still like to support
older browsers, you can use the legacy bundle by importing:
### For javascript projects
```js
import { linkIt, LinkIt } from "react-linkify-it/legacy";
```
### For typescript < v5.0.0 projects ([why?](https://github.com/microsoft/TypeScript/issues/33079))
```js
import { linkIt, LinkIt } from "react-linkify-it/dist/react-linkify-it.legacy.esm.min";
```
_Note_: Legacy bundle has a larger file size (~3.4Kb minziped).
## Using a browser bundle
An umd build with legacy browser support can be used from [Unpkg](https://unpkg.com/react-linkify-it).
## Acknowledgment
This project was made possible due to the incredible work done on the following projects:
- [sanitize-url](https://github.com/braintree/sanitize-url)
- [react-linkify](https://github.com/tasti/react-linkify)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
Hey 👋 If my packages has helped you in any way, consider making a small donation to encourage me to keep contributing. Maintaining good software takes time and effort and for open source developers there is very less incentives to do so.
Your contribution is greatly appreciated and will motivate me to continue to support developing my packages which you may have used.