😸
DocsAbout

Docs

Installation

To install tabky-js, run the following command in your terminal.

npm install tabky-js

API

addBadge(props: Object): void

Adds a badge to the current favicon. This can be used to add "you have a notification" type effect to your favicon or to indicate some other state to the user. Currently resets the favicon when called so you can only add badges to the original favicon.

  • type : "dot" | "count" - Type of badge.
  • count : number - Default: null. Count to display on the badge. Only used if type: "count".
  • size : "xs" | "sm" | "md" | "lg" - Default: "md". Size of the badge.
  • position : "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" - Default: "top-right". Position of the badge on favicon
  • font : string - Default: "sans-serif". Override font used for the count. Only used if type: "count".
  • dotColor : Color - Default: "#ff0000". Color of the badge dot. Accepts any valid CSS color.
  • innerDotColor : Color - Default: "#fff". Color of the inner badge dot. Accepts any valid CSS color. Set to same as dotColor to remove inner dot. Only used if type: "dot".
  • countColor : Color - Default: "#fff". Color of the count / number in badge. Only used if type: "count".

Add badge to favicon

import { addBadge } from 'tabky-js';

addBadge({
  type: 'dot',
});

Add badge, smaller size

import { addBadge } from 'tabky-js';

addBadge({
  type: 'dot',
  size: 'sm' // xs, sm, md, lg
});

Add badge with count

import { addBadge } from 'tabky-js';

addBadge({
  type: 'count',
  count: 1,
});

Add badge with count (custom font)

import { addBadge } from 'tabky-js';

addBadge({
  type: 'count',
  count: 1,
  font: 'Inter',
});

Add badge, modify position

import { addBadge } from 'tabky-js';

addBadge({
  type: 'dot',
  position: 'bottom-right',
});

Add badge, custom dot colors

import { addBadge } from 'tabky-js';

addBadge({
  type: 'dot',
  color: '#00FF00',
  innerDotColor: '#000',
});

swapFavicon(props: Object)

Replace the current favicon with a new one. By using the "when" options prop, you can make it run only once or on blur / focus events (always). Resetting will reset the favicon to the original value before any tampering.

  • favicon : string - The URL or emoji of the new favicon.
  • when : "now" | "onfocus" | "onblur" - Default "now". When to swap the favicon.
  • reset : "none" | "after" | "onfocus" | "onblur" - Reset the favicon if needed to the original favicon before any tampering.
  • resetAfterMs : number - The number of milliseconds to wait before resetting the favicon. Only used with reset: "after"

Swap favicon to emoji, draw as PNG

import { swapFavicon } from 'tabky-js';

swapFavicon({
  favicon: '🎉', // favicon or img URL
});

Swap favicon to emoji, draw as SVG

import { swapFavicon } from 'tabky-js';

swapFavicon({
  favicon: '🎉', // favicon or img URL,
  emojiCompatibilityMode: false, // this will draw the emoji as SVG instead of using the canvas.
});

Swap favicon to emoji, reset after 3 seconds

import { swapFavicon } from 'tabky-js';

swapFavicon({
  favicon: '⏳',
  when: 'now',
  reset: 'after',
  resetAfter: 3000,
});

Swap favicon on blur, reset on focus

import { swapFavicon } from 'tabky-js';

swapFavicon({
  favicon: '👋',
  when: 'onblur',
  reset: 'onfocus',
});

swapTitle(props: Object): void

Replace the current title with a new one. By using the "when" options prop, you can make it run only once or on blur / focus events (always). Resetting will reset the title to the original value before any tampering.

  • title : string - The new document title (document.title).
  • when : "now" | "onfocus" | "onblur" - Default "now". When to swap the title.
  • reset : "none" | "after" | "onfocus" | "onblur" - Reset the title if needed to the original document title before any tampering.
  • resetAfterMs : number - Used only with reset: "after" - The number of milliseconds to wait before resetting the title.

Swap title now

import { swapTitle } from 'annoying-title';

swapTitle({
  title: 'New page title',
});

Swap title, reset after 3 seconds

import { swapTitle } from 'annoying-title';

swapTitle({
  title: 'Congratz! You did a thing!',
  when: 'now',
  reset: 'after',
  resetAfter: 3000,
});

Swap title on blur, reset on focus

import { swapTitle } from 'annoying-title';

swapTitle({
  title: 'Hey, come back!',
  when: 'onblur',
  reset: 'onfocus',
});

resetFavicon(): void

Resets the favicon, undoing any other swapping or messing with the title done by this library.

    import { resetFavicon } from 'tabky-js';

// Resets favicon to original value (before tampering)
resetFavicon();

    resetTitle(): void

    Resets the title, undoing any other swapping or messing with the title done by this library.

      import { resetTitle } from 'annoying-title';

// Resets title to original value (before tampering)
resetTitle();

      marqueeTitle(props: Object): Interval

      Marquee effect on the document title. Not really optimised. Built for fun, usage not recommended.

      • title : string - The new document title to marquee.
      • interval : number - Default 300. How fast the title is marquee'd in milliseconds. Used for the setInterval that scrolls the title.
      import { marqueeTitle } from 'annoying-title';

marqueeTitle({
  title: 'BREAKING NEWS! This is a marquee title!',
  interval: 300,
});