Breakpoint: Opt-in exact sizes

[brigand]

Sometimes you need the exact size of the viewport in one or more breakpoints. This may only be needed for e.g. your 'small' size, where you do some computed styles.

{ name: 'small', maxWidth: 600, passExact: true }

Then in your component, you can do bp.width() to get the viewport width, and bp.height() to get the viewport height. If passExact is falsy for the current breakpoint, then the width and height methods will throw.

The breakpoint accepts any of these properties:

• throttle: number milliseconds to wait between updates
• raf: boolean use requestAnimationFrame to throttle updates
• idle: number, use requestIdleCallback. The number is the max timeout before an update occurs.

For idle on a viewport breakpoint, it'll generally happen when the user pauses resizing. It's a bit inconsistent. For an element resizing when not based on user interaction, it's highly unstable. I recommend setting this to reasonably low value, like 50 to 250. That cuts down on the inconsistency a bit. Even with a long duration, basic tests show it's called quickly in chrome.