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 min
and 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 |
License
MIT © 2023 Jens Simon