https://github.com/ashikmeerankutty/hat

Dynamic favicon and title
https://github.com/ashikmeerankutty/hat

Last synced: about 2 months ago
JSON representation

Dynamic favicon and title

• Host: GitHub
• URL: https://github.com/ashikmeerankutty/hat
• Owner: ashikmeerankutty
• Created: 2020-12-12T19:26:54.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T22:42:58.000Z (over 1 year ago)
• Last Synced: 2024-07-05T02:31:19.223Z (3 months ago)
• Language: TypeScript
• Homepage: https://ashikmeerankutty.github.io/hat/
• Size: 3.12 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# HAT

A light set of helpers for updating title and favicons dynamically.

## Examples

See examples [here](https://ashikmeerankutty.github.io/hat)

## Installation

    npm i @space-kit/hat

## Helpers

### Add a count in title

```javascript

import { setTitleCount } from '@space-kit/hat';

setTitleCount(10) // updates title as `(10) your title text`  

```

### Add a counter to title

```javascript

import { titleCounter } from '@space-kit/hat';

const increment = titleCounter(0, 'Hello');

increment() // updates title as `(1) your title text`  

```

### Add a rolling title

```javascript

import { rollingTitle } from '@space-kit/hat';

rollingTitle('A very long text') // start a rolling title 

```

### Update favicon with an svg

Updates favicon with an svg.

```javascript

import { svgFavicon } from '@space-kit/hat';

const svgLogo = 'yoursvg`;

svgFavicon(svgLogo); // set svg icon as favicon

```

### Update favicon with an svg

Replaces `{{count}}` in an svg with a dynamic counter value, Suitable for chat apps to show unread messages inside favicon.

```javascript

import { svgFaviconCounter } from '@space-kit/hat';

/**

 * Replace {{count}} with counter value

*/

const svgLogo = '{{count}}';

const incrementFavicon = svgFaviconCounter(svgString);

incrementFavicon(); // increments count inside favicon

```

## Development

### Build

    npm run build

### Test

    npm run test

### Release

    npm publish