https://github.com/tutkli/ngx-breakpoint-observer

Angular reactive breakpoint observer based on Signals.
https://github.com/tutkli/ngx-breakpoint-observer

Last synced: 3 months ago
JSON representation

Angular reactive breakpoint observer based on Signals.

• Host: GitHub
• URL: https://github.com/tutkli/ngx-breakpoint-observer
• Owner: tutkli
• License: mit
• Created: 2023-06-20T12:49:40.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-30T12:12:34.000Z (about 1 year ago)
• Last Synced: 2024-03-14T17:13:54.626Z (8 months ago)
• Language: TypeScript
• Homepage: https://tutkli.github.io/ngx-breakpoint-observer/
• Size: 290 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)

README

        
# ngx-breakpoint-observer

This library adds reactive breakpoint and media query methods based on Signals.

The code is directly inspired by [VueUse](https://vueuse.org/).

## Installation

```shell

npm install ngx-breakpoint-observer

```

## Usage

```ts

import {

  breakpointsTailwind,

  observeBreakpoints,

} from 'ngx-breakpoint-observer';

const breakpoints = observeBreakpoints(breakpointsTailwind);

const smAndLarger = breakpoints.greaterOrEqual('sm'); // sm and larger

const largerThanSm = breakpoints.greater('sm'); // only larger than sm

const lgAndSmaller = breakpoints.smallerOrEqual('lg'); // lg and smaller

const smallerThanLg = breakpoints.smaller('lg'); // only smaller than lg

```

```ts

import { observeBreakpoints } from 'ngx-breakpoint-observer';

const breakpoints = observeBreakpoints({

  tablet: 640,

  laptop: 1024,

  desktop: 1280,

});

const laptop = breakpoints.between('laptop', 'desktop');

```

## License

[MIT License](https://github.com/tutkli/ngx-breakpoint-observer/blob/master/LICENSE)