Link-styler NPM

link-styler is a JavaScript package that helps you find links in text and replace them with a tag that has custom styling.

link

demo | issues

Installation

You can install link-styler using npm:

npm install link-styler

Usage

Here is an example of how to use link-styler:

import { linkStyler } from 'link-styler';

linkStyler.start();

<script src="https://unpkg.com/link-styler/dist/link-styler.js"></script>
<script>
  linkStyler.start();
</script>

This will output the following:

LinkStyler

By default, link-styler will style the link with '#000000d9' color and '#a9a9a94f' background color by border radius 15px. It will also add an external link icon. You can customize the styling by passing options to the linkStyler function:

const options = {
  bg: true,
  bgColor: '#c7c7c7c2',
  textColor: '#000000d9',
  borderRadius: 15,
  showIcon: true,
  iconColor: true,
  underline: false,
  link: {
    pathnameLengthLimit: 20,
  },
  atsign: {
    enable: true,
    path: 'https://www.linkedin.com/in/',
    bg: false,
    textColor: '#e31a1ad9',
    showIcon: true,
    underline: true,
  },
  hashTag: {
    enable: true,
    path: 'https://www.linkedin.com/feed/hashtag/?keywords=',
    bg: false,
    textColor: '#0250ffd9',
    showIcon: true,
    underline: false,
  },
};

linkStyler.start(options);

Options

link-styler accepts the following options:

Option	Default Value	Type	Optional	Description
bg	`true`	boolean	*	-
bgColor	`'#a9a9a94f'`	string	*	-
textColor	`'#000000d9'`	string	*	-
borderRadius	`15`	number	*	-
showIcon	`true`	boolean	*	-
iconColor	`true`	boolean	*	-
underline	`false`	boolean	*	-
link.pathnameLengthLimit	`20`	number	*	-
link.bg		boolean	*	-
link.bgColor		string	*	-
link.textColor		string	*	-
link.borderRadius		number	*	-
link.showIcon		boolean	*	-
link.iconColor		boolean	*	-
link.underline		boolean	*	-
atsign.path	`''`	string	*	-
atsign.enable	`true`	boolean	*	-
atsign.bg	`false`	boolean	*	-
atsign.bgColor		string	*	-
atsign.textColor	`'#e31a1ad9'`	string	*	-
atsign.borderRadius		number	*	-
atsign.showIcon	`false`	boolean	*	-
atsign.iconColor		boolean	*	-
atsign.underline	`true`	boolean	*	-
atsign.removeAtsignChar	`false`	boolean	*	-
hashTag.enable	`true`	boolean	*	-
hashTag.path	`''`	string	*	-
hashTag.bg	`false`	boolean	*	-
hashTag.bgColor		string	*	-
hashTag.textColor	`'#0250ffd9'`	string	*	-
hashTag.borderRadius		number	*	-
hashTag.showIcon	`false`	boolean	*	-
hashTag.iconColor		boolean	*	-
hashTag.underline	`false`	boolean	*	-
hashTag.removeHashTagChar	`false`	boolean	*	-