Page MenuHomec4science
Files F100868890

useBreakpoint.js
No OneTemporary
Actions

File Metadata

Created
Mon, Feb 3, 11:07

useBreakpoint.js
View Options

import useMediaQuery from './useMediaQuery';
import { useMemo } from 'react';
/**
* Create a responsive hook we a set of breakpoint names and widths.
* You can use any valid css units as well as a numbers (for pixels).
*
* **NOTE:** The object key order is important! it's assumed to be in order from smallest to largest
*
* ```ts
* const useBreakpoint = createBreakpointHook({
* xs: 0,
* sm: 576,
* md: 768,
* lg: 992,
* xl: 1200,
* })
* ```
*
* **Watch out!** using string values will sometimes construct media queries using css `calc()` which
* is NOT supported in media queries by all browsers at the moment. use numbers for
* the widest range of browser support.
*
* @param breakpointValues A object hash of names to breakpoint dimensions
*/
export function createBreakpointHook(breakpointValues) {
var names = Object.keys(breakpointValues);
function and(query, next) {
if (query === next) {
return next;
}
return query ? query + " and " + next : next;
}
function getNext(breakpoint) {
return names[Math.min(names.indexOf(breakpoint) + 1, names.length - 1)];
}
function getMaxQuery(breakpoint) {
var next = getNext(breakpoint);
var value = breakpointValues[next];
if (typeof value === 'number') value = value - 0.2 + "px";else value = "calc(" + value + " - 0.2px)";
return "(max-width: " + value + ")";
}
function getMinQuery(breakpoint) {
var value = breakpointValues[breakpoint];
if (typeof value === 'number') {
value = value + "px";
}
return "(min-width: " + value + ")";
}
/**
* Match a set of breakpoints
*
* ```tsx
* const MidSizeOnly = () => {
* const isMid = useBreakpoint({ lg: 'down', sm: 'up' });
*
* if (isMid) return <div>On a Reasonable sized Screen!</div>
* return null;
* }
* ```
* @param breakpointMap An object map of breakpoints and directions, queries are constructed using "and" to join
* breakpoints together
* @param window Optionally specify the target window to match against (useful when rendering into iframes)
*/
function useBreakpoint(breakpointOrMap, direction, window) {
var breakpointMap;
if (typeof breakpointOrMap === 'object') {
breakpointMap = breakpointOrMap;
window = direction;
direction = true;
} else {
var _breakpointMap;
direction = direction || true;
breakpointMap = (_breakpointMap = {}, _breakpointMap[breakpointOrMap] = direction, _breakpointMap);
}
var query = useMemo(function () {
return Object.entries(breakpointMap).reduce(function (query, _ref) {
var key = _ref[0],
direction = _ref[1];
if (direction === 'up' || direction === true) {
query = and(query, getMinQuery(key));
}
if (direction === 'down' || direction === true) {
query = and(query, getMaxQuery(key));
}
return query;
}, '');
}, [JSON.stringify(breakpointMap)]);
return useMediaQuery(query, window);
}
return useBreakpoint;
}
var useBreakpoint = createBreakpointHook({
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400
});
export default useBreakpoint;

Event Timeline

c4science · Help