rx-responsive v0.9.34
RxResponsive
RxResponsive is a small angular library for working with responsive web breakpoints in a fluid manner using RxJs.
The default breakpoints are based on bootstrap but you can configure your own strongly typed breakpoints too.
Install
yarn add rx-responsive
Usage:
Module setup
Add the RxResponsiveModule
with forRoot()
to your root module's imports
import { RxResponsiveModule } from 'rx-responsive';
@NgModule({
imports: [
RxResponsiveModule.forRoot()
],
declarations: [
..
],
providers: [
..
],
bootstrap: [AppComponent]
})
export class AppModule {}
Component setup
Inject the RxResponsiveService
service publicly
import { RxResponsiveService } from 'rx-responsive';
@Component({
..
})
export class MyComponent {
constructor (
public media: RxResponsiveService
) { }
}
Using the service in your HTML
Given that you have publicly imported RxResponsiveService
in your component with a name of media
Simple breakpoints
<div *ngIf="media.is.xs | async"></div>
<div *ngIf="media.is.sm | async"></div>
<div *ngIf="media.is.md | async"></div>
<div *ngIf="media.is.lg | async"></div>
<div *ngIf="media.is.xl | async"></div>
Combined breakpoints
<div *ngIf="media.is.xs.or.sm | async"></div>
<div *ngIf="media.is.lg.or.xl | async"></div>
<div *ngIf="media.is.sm.or.md.or.lg | async"></div>
greater$ and less$
<div *ngIf="media.is.md.or.greater | async"></div>
<div *ngIf="media.is.lg.or.less | async"></div>
Service API
.snapshot
A public getter to a snapshot in time of the current breakpoints
media.snapshot.md === true
.mediaSize$
A public getter to the breakpoint observable
media.mediaSize$.pipe(
filter(ms => ms.lg),
switchMap(...)
)
Configuring breakpoints
The default breakpoint sizes are based on bootstrap, but you can configure your own breakpoint conditions.
First off, define your own breakpoints as a const somewhere
export const MyCustomBreakpoints = {
mobile: { max: 500 },
tablet: { min: 501, max: 1000 }
desktop: { max: 1001 }
}
When importing the module RxResponsiveModule
pass your breakpoints into the forRoot()
method
import { RxResponsiveModule } from 'rx-responsive';
@NgModule({
imports: [
RxResponsiveModule.withConfig(MyCustomBreakpoints)
],
declarations: [
..
],
providers: [
..
],
bootstrap: [AppComponent]
})
export class AppModule {}
Finally, when importing the RxResponsiveService
service in your component, add a generic type argument of your custom breakpoints
import { RxResponsiveService } from 'rx-responsive';
@Component({
..
})
export class MyComponent {
constructor (
public media: RxResponsiveService<typeof MyCustomBreakpoints>
) { }
}
You will then get strong typing of your custom breakpoints
<div *ngIf="media.is.mobile | async"></div>
<div *ngIf="media.is.tablet.or.greater | async"></div>
<div *ngIf="media.is.mobile.or.desktop | async"></div>
media.mediaSize$.pipe(
filter(ms => ms.mobile),
switchMap(..)
)
media.is.mobile
.subscribe(..)
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago