@al00x/screen-detector
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

@Al00X/Screen-Detector

🖨️ Get your device screen type reactively! in Angular.

✅ Setup:

Install using your preferred package manager:

npm i @al00x/screen-detector

✨ Usage:

ScreenDetectorService it's all you need!

<div *NgIf="screenDetector.isDesktop$ | async">
  Render when reached desktop breakpoint
</div>

<!-- The below *NgIf condition, it's always true -->
<ng-container *NgIf="{state: screenDetector.state$ | async} as screen">
  XL Breakpoint? {{ screen.xl ? 'YES' : 'NO'}}
</ng-container>

There's 6: xxl, xl, lg, md, sm, xs breakpoint types, also with utility: isDesktop which is defaulted as lg and it's changeable.

You can also check the example files for various usages: Playground

⚙️ Config:

You can config screen detector for more customization by providing ALX_SCREEN_DETECTOR_CONFIG.

// component.ts

@Component({
  ...,
  providers: [
    {
      provide: ALX_SCREEN_DETECTOR_CONFIG,
      useValue: {
        ...,
        // The breakpoints below are the default values that are the same as default TailwindCSS breakpoints.
        breakpoints: {
          xxl: 1536,
          xl: 1280,
          lg: 1024,
          md: 768,
          sm: 640,
          xs: 420,
        }
      } as AlxScreenDetectorConfig
    }
  ],
})
export class Component { }

Config Options:

property default description
desktopBreakpoint: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' 'lg' You can set at which breakpoint is considered as desktop
resizeDebounceTime: number 25 Screen resize event debounce time in milliseconds; Shorter values cause a faster detection but reduced performance
breakpoints: BreakpointsConfig In the example above Describe each breakpoint's pixels

Package Sidebar

Install

npm i @al00x/screen-detector

Weekly Downloads

23

Version

1.3.1

License

MIT

Unpacked Size

33.9 kB

Total Files

13

Last publish

Collaborators

  • al00x