Transform URLs in strings to actual links.

Overview

solid-links

Transform URLs in strings to actual links. It will find valid links in the given string and create <a> tags for it.

Internally, it uses this Regex to identify links.

NPM npm bundle size (scoped) npm bundle size (scoped version) Libraries.io dependency status for latest release, scoped npm package NPM

Table of Contents

Installation

This library is available through the npm registry.

NPM

$ npm -i solid-links

Yarn

$ yarn add solid-links

Setup

Start using it by importing the library first.

CommonJS

const Linkify = require('solid-links');

or

ES6

import Linkify from 'solid-links';

Usage

import Linkify from 'solid-links';

const TEST_STRING = `
  Will match the following cases

      http://www.foufos.gr
      https://www.foufos.gr
      http://foufos.gr
      http://www.foufos.gr/kino
      http://werer.gr
      www.foufos.gr
      www.mp3.com
      www.t.co
      http://t.co
      http://www.t.co
      https://www.t.co
      www.aa.com
      http://aa.com
      http://www.aa.com
      https://www.aa.com

  Will NOT match the following

      www.foufos
      www.foufos-.gr
      www.-foufos.gr
      foufos.gr
      http://www.foufos
      http://foufos
      www.mp3#.com
`;

export default function Sample() {
  return (
    <Linkify
      text={TEST_STRING}
      style="text-decoration: underline; color: blue;"
    />
  );
}

Authors

See also the list of contributors who participated in this project.

Changelog

Changelog

License

MIT

You might also like...

Jump to github urls (browser addon)

Jump to github urls (browser addon)

Currently a Firefox addon. Find GitHub locations quickly using your browser's history. Usage Use your mouse or keyboard. Use the filter to search for

Nov 28, 2022

Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

Jan 25, 2022

Emoji - Use emoji names instead of Unicode strings. Copy-pasting emoji sucks.

Grammy Emoji Adds emoji parsing for grammY. Check out the official documentation for this plugin. While this draft is working, we still do not recomme

Sep 5, 2022

A typescript transform that converts exported const enums into object literal.

ts-transformer-optimize-const-enum A typescript transformer that convert exported const enum into object literal. This is just like the one from @babe

Jul 27, 2022

Compare camelized/dasherized/underscored strings each other 🤜🏿 🤛🏿

aynen Compare camelized/dasherized/underscored strings each other Install npm install aynen yarn add aynen Usage import aynen from 'aynen'; aynen('fo

Mar 25, 2022

Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices

Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices

Jan 6, 2023

An imports transform unplugin.

unplugin-transform-imports An imports transform unplugin based on babel inspired by babel-plugin-transform-imports. What unplugin-transform-imports Do

Nov 29, 2022

A TypeScript namespace declaration for KeyboardEvent.key strings, just in case your code is allergic to enums.

ts-key-namespace A TypeScript namespace declaration for KeyboardEvent.key strings, just in case you prefer namespaces to enums. Largely based on ts-ke

Apr 5, 2022

A plugin for Strapi Headless CMS that provides the ability to transform the API request or response.

strapi-plugin-transformer A plugin for Strapi that provides the ability to transform the API request and/or response. Requirements The installation re

Jan 6, 2023
Owner
Prince Neil Cedrick Castro
Loves to learn, build, and help. Software Engineer and Architect @LyonInc.
Prince Neil Cedrick Castro
Displaying actual age in percentage with 9 signs after dot (floating number)

Actual Age Chrome Extension Displaying actual age in percentage with 9 signs after dot (floating number) Features Popup You can select your Birth date

Igor Makeenko 22 Nov 2, 2022
Actual, a local-first personal finance tool

This is the main project to run Actual, a local-first personal finance tool. It comes with the latest version of Actual, and a server to persist chang

null 1.3k Jan 3, 2023
A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly spread her weight (load) across your cores

Indomitable A lightweight (the actual ship is heavy though), performat & powerful sharder for Discord.JS. Indomitable uses cluster module to evenly sp

Saya 17 Nov 29, 2022
Powercord plugin to make "divider" roles into actual dividers

Powecord Role Dividers Install in Replugged Turns "divider" roles into actual dividers. Before: After: A divider role I have is not being shown as a d

Albert Portnoy 7 Dec 28, 2022
A dockerized uptime monitoring RESTful API server that allows authenticated users to monitor URLs

A dockerized uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Anas Hamed 2 Oct 7, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
Generate colorful and temporarily identifiable SVGs with unique urls.

reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.

Tim Mikeladze 7 Dec 6, 2022
Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Uptime Monitoring API Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about thei

Mohamed Magdi 2 Jun 14, 2022
Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`

esm-import-transformer Can transform any ESM source code import URLs using an import maps object. This package works in ES modules or in CJS. // Befor

Zach Leatherman 19 Jul 31, 2022
Hash.js is a 0.5 KB script that lets you in a super simple way manipulate everything behind # in urls.

Hash.js - URL Hash Manipulation Hash.js is a 0.5 KB script that lets you in a super simple way manipulate everything behind # in urls. Tested in lates

Jonny Strömberg 152 Aug 1, 2022