Breakpoint-changes-rx NPM

breakpoint-changes-rx

Detect and handle viewport changes. Using RxJS Observables

You have a responsive web site and want to handle viewport state with ease?

Here we are. Handing viewport state with the help of RxJS.

import breakpoints, { parseBreakpoints } from 'breakpoint-changes-rx'
import style from './style.scss'

const breakpointDefinitions = parseBreakpoints(style)

const bps = breakpoints(breakpointDefinitions)

console.log('current breakpoints: %o', bps.getCurrentBreakpoints())

What are the current viewports?

console.log(
  breakpoints.getCurrentBreakpoints(), // [ "md", "lg" } ]
)

Install

yarn add breakpoint-changes-rx

`breakpoints(breakpointDefinitions)`

This function initializes the breakpoint detection and returns an object containing following properties:

breakpoint-changes-rx

For details about the breakpointDefinitions see Configuration section

import breakpoints, { parseBreakpoints } from 'breakpoint-changes-rx'
import style from './style.scss'

const breakpointDefinitions = parseBreakpoints(style)

const bps = breakpoints(breakpointDefinitions)

console.log('current breakpoints: %o', bps.getCurrentBreakpoints())

`breakpointsChanges$`

An observable that emits a value when breakpoints change. The format of these values is

{
  curr: ['md'],
  prev: ['lg'],
}

Usage example:

bps.breakpointChanges$.subscribe(({
  curr,
  prev,
}) => {
  console.log('previous breakpoint is %o, actual breakpoint is %o', prev, curr)
})

Current and previous breakpoints are stored in arrays because it's possible to have multiple active breakpoints at the same time.

`breakpointsChangesBehavior$`

This is the same as breakpointsChanges$ except it is a BehaviorSubject. So when a new Observer subscribes it will immediately emit the current breakpoint data.

`getCurrentBreakpoints()`

Returns the current active breakpoints as an array.

const current = bp.getCurrentBreakpoints()

console.log('current breakpoints are %o', current) // e.g. ['lg']

`breakpointsChange(bp)`

Returns an observable that emits a boolean value when the given breakpoint gets entered or left.

bp.breakpointsChange('md').subscribe((active) => {
  console.log('breakpoint md %s', active ? 'entered' : 'left')
})

`breakpointsInRange(range)`

Returns an observable that emits a boolean value when a range of breakpoints gets entered or left. If a change appears between the given range no value gets emitted.

bp.breakpointsInRange(['sm', 'md']).subscribe((active) => {
  console.log('range gets %s', active ? 'entered' : 'left')
})

`includesBreakpoints(bps)`

Returns true if the current breakpoints contain breakpoints which are part of the given array.

console.log('this might be a mobile device %o', bp.includesBreakpoints(['sm', 'md']))

`includesBreakpoint(bp)`

Returns true if the given breakpoint is part of the current active breakpoints.

console.log('breakpoint "md" is active %o', bp.includesBreakpoint('md'))

Configuration

This section describes the configuration used by the breakpoints(breakpointDefinitions) function using this example

Breakpoint name	min	max
sm		`767px`
md	`768px`	`991px`
lg	`991px`	`1199px`
xl	`1200px`

Format

The used format for this example is shown here:

{
  "sm": { "max": "767px" },
  "md": { "min": "768px", "max": "991px" },
  "lg": { "min": "992px", "max": "1199px" },
  "xl": { "min": "1200px" }
}

The values for the minand max properties can also be of type number. In this case pixels as unit will be omitted.

`parseBreakpoints(object, config)`

This function was created to parse breakpoint data from exported variables of a CSS Module.

:export {
  breakpoint-sm-max: $bp-small-max;
  breakpoint-md-min: $bp-medium;
  breakpoint-md-max: $bp-medium-max;
  breakpoint-lg-min: $bp-large;
  breakpoint-lg-max: $bp-large-max;
  breakpoint-xl-min: $bp-xlarge;
}

import { parseBreakpoints } from 'breakpoint-changes-rx'
import style from './style.scss'

const breakpointDefinitions = parseBreakpoints(style)

It filters all properties of the passed object that matches the breakpoint pattern.

This function can use an optional configuration.

Name	Description	Default
`regex`	A regular expression describing the breakpoint naming to parse	`/^breakpoint-(\w*)-((max)\\|(min))$/`
`groupName`	The index of the capture group that contains the name of the breakpoint	`1`
`groupMinMax`	The capture group index that contains the identifier for min or max of the breakpoint	`2`
`isMin`	A function that returns `true` if the given min/max value represents min	`(val) => val === nameMin`