@xdanangelxoqenpm/iure-quia-velit
v1.0.0
Published
[![NPM version][npm-image]][npm-url] [![Downloads][npm-downloads-image]][npm-url] [![star this repo][gh-stars-image]][gh-url] [![fork this repo][gh-forks-image]][gh-url] [![CI][gh-status-image]][gh-status-url] [![Coverage Status][coveralls-image]][coveral
Downloads
5
Maintainers
Keywords
Readme
@xdanangelxoqenpm/iure-quia-velit
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 '@xdanangelxoqenpm/iure-quia-velit'
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 @xdanangelxoqenpm/iure-quia-velit
breakpoints(breakpointDefinitions)
This function initializes the breakpoint detection and returns an object containing following properties:
For details about the breakpointDefinitions see Configuration section
import breakpoints, { parseBreakpoints } from '@xdanangelxoqenpm/iure-quia-velit'
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 '@xdanangelxoqenpm/iure-quia-velit'
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