Skip to the content.

Build status CircleCI npm version install size Downloads Gitpod Ready-to-Code Known Vulnerabilities CDNJS License

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

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

License

link-styler is licensed under the MIT License.