link-styler

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:

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	*	-

License

link-styler is licensed under the MIT License.