ngx-saqly-work-balance

A lightweight Angular developer productivity library that helps developers maintain a healthier workflow by showing reminders such as drinking water, stretching, taking tea or coffee breaks, and more.

This package is designed to be simple, configurable, and easy to integrate into Angular applications.

Features

• Angular standalone-first setup
• Easy configuration using provideSaqlyWorkBalance(...)
• Multiple reminder types:
  • Browser notifications
  • In-app toast notifications
  • Console messages
• Per-reminder enable/disable support
• Custom reminder titles and messages
• devOnly mode support
• Trigger reminders immediately on startup
• Configurable toast duration and max visible toasts

Installation

npm install ngx-saqly-work-balance

Quick Start

1) Add the provider in app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideSaqlyWorkBalance } from 'ngx-saqly-work-balance';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideSaqlyWorkBalance({
      enabled: true,
      devOnly: true,
      appName: 'Saqly Work Balance',
      defaultType: 'toast',
      toastDurationMs: 5000,
      maxToasts: 3,
      requestBrowserPermissionOnStart: true,
      reminders: [
        {
          id: 'water',
          label: 'Drink water',
          intervalMinutes: 30,
          enabled: true,
          type: 'toast',
          triggerOnStart: true,
        },
        {
          id: 'stretch',
          label: 'Stand up and stretch for 2 minutes',
          intervalMinutes: 60,
          enabled: true,
          type: 'browser',
        },
        {
          id: 'coffee',
          label: 'Time for tea or coffee break',
          intervalMinutes: 120,
          enabled: true,
          type: 'console',
        },
      ],
    }),
  ]
};

2) Add the toast component in your root component

import { Component } from '@angular/core';
import { WorkBalanceToastComponent } from 'ngx-saqly-work-balance';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WorkBalanceToastComponent, RouterOutlet],
  template: `
    <router-outlet />
    <saqly-work-balance-toast />
  `,
})
export class App {}

Reminder Types

toast → in-app UI notification
browser → browser notification (depends on system settings)
console → console.log message

Testing Tips

Use small intervals for testing:

intervalMinutes: 0.1

= 6 seconds

Important Notes

• Browser notifications depend on OS + browser settings
• Some systems show notifications in notification center only
• If devOnly = true → will not run in production

License

MIT