https://github.com/arsh-07-bot/linkifyjs
A lightweight JavaScript library to turn selected text into links with a customizable tooltip UI — perfect for editors, note apps, and rich content creators.
https://github.com/arsh-07-bot/linkifyjs
angular email find-links javascript jquery-plugin library ngx nodejs react text-selection tooltip url vanilla-js vue
Last synced: about 2 months ago
JSON representation
A lightweight JavaScript library to turn selected text into links with a customizable tooltip UI — perfect for editors, note apps, and rich content creators.
- Host: GitHub
- URL: https://github.com/arsh-07-bot/linkifyjs
- Owner: Arsh-07-bot
- Created: 2025-04-10T19:26:23.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-10T20:09:58.000Z (about 2 months ago)
- Last Synced: 2025-04-10T21:24:15.588Z (about 2 months ago)
- Topics: angular, email, find-links, javascript, jquery-plugin, library, ngx, nodejs, react, text-selection, tooltip, url, vanilla-js, vue
- Language: TypeScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LinkifyJS 🌐✨
[](https://github.com/Arsh-07-bot/LinkifyJS/releases)
---
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [API Documentation](#api-documentation)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)
- [Support](#support)
---
## Introduction
Welcome to **LinkifyJS**, a lightweight JavaScript library designed to transform selected text into clickable links. With a customizable tooltip UI, LinkifyJS is ideal for editors, note-taking apps, and rich content creators. Whether you're building a text editor or enhancing your web application, LinkifyJS provides a simple solution to linkify your content.
You can find the latest releases [here](https://github.com/Arsh-07-bot/LinkifyJS/releases).
---
## Features
- **Lightweight**: Minimal footprint ensures fast load times.
- **Customizable Tooltips**: Easily modify the appearance and behavior of tooltips.
- **Vanilla JS**: No dependencies required, works seamlessly with any project.
- **Rich Text Support**: Linkify plain text, HTML, and contenteditable elements.
- **Easy Integration**: Simple API makes it easy to get started.
- **Open Source**: Free to use and modify under the MIT License.
---
## Installation
To get started with LinkifyJS, you can download the latest release from our [Releases](https://github.com/Arsh-07-bot/LinkifyJS/releases) section.
### Using npm
If you prefer using npm, you can install LinkifyJS directly into your project:
```bash
npm install linkifyjs
```
### Manual Download
Alternatively, you can download the library manually. After downloading, include the script in your HTML file:
```html
```
---
## Usage
LinkifyJS is easy to use. Here’s a quick example of how to linkify text on your webpage.
### Basic Example
1. Include the LinkifyJS script in your HTML:
```html
```
2. Call the `linkify` function on the desired text element:
```javascript
const textElement = document.getElementById('text');
linkify(textElement);
```
3. Customize the tooltip options as needed:
```javascript
linkify(textElement, {
tooltip: {
show: true,
text: 'Click to visit',
background: '#333',
color: '#fff'
}
});
```
### Advanced Example
For more advanced usage, you can linkify specific types of content, such as email addresses or URLs:
```javascript
linkify(textElement, {
// Linkify only URLs
linkify: {
urls: true,
emails: false
}
});
```
---
## API Documentation
### `linkify(element, options)`
- **element**: The DOM element containing the text to linkify.
- **options**: An optional object to customize behavior.
#### Options
- **tooltip**: Object to customize tooltip behavior.
- **show**: Boolean to show or hide tooltip.
- **text**: String to set the tooltip text.
- **background**: String to set tooltip background color.
- **color**: String to set tooltip text color.
---
## Examples
### Simple HTML Example
```html
LinkifyJS Example
Check out my website at https://example.com
const textElement = document.getElementById('text');
linkify(textElement);
```
### Live Demo
For a live demo, check out our examples on the [GitHub Pages](https://arsh-07-bot.github.io/LinkifyJS/).
---
## Contributing
We welcome contributions! If you would like to contribute to LinkifyJS, please follow these steps:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/YourFeature`).
3. Make your changes and commit them (`git commit -m 'Add some feature'`).
4. Push to the branch (`git push origin feature/YourFeature`).
5. Open a pull request.
Please ensure your code follows the style guidelines and includes tests where applicable.
---
## License
LinkifyJS is open-source software licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
---
## Support
If you encounter any issues or have questions, please check the [Issues](https://github.com/Arsh-07-bot/LinkifyJS/issues) section. You can also reach out via the repository's discussions.
For the latest updates and releases, visit our [Releases](https://github.com/Arsh-07-bot/LinkifyJS/releases) page.
---
Thank you for checking out LinkifyJS! We hope you find it useful for your projects.