Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 15x 13x 13x 13x 1x 5x 5x 5x 5x 5x 5x | import upperFirst from 'lodash/upperFirst'; import defaultBreakpoints from './breakpoints'; function createMediaQuery(min, max, key) { if ((min === null && max === null) || (min === 0 && max === null)) return null; let query = min ? `all and (min-width: ${min}px)` : 'all'; if (max !== null) query = `${query} and (max-width: ${max}px)`; return { [key]: query }; } export default (breakpoints = defaultBreakpoints) => breakpoints.reduce((acc, breakpoint, index) => { const key = Object.keys(breakpoint).shift(); const nextBreakPoint = breakpoints[index + 1]; const upperKey = upperFirst(key); const min = breakpoint[key]; const max = nextBreakPoint ? Object.values(nextBreakPoint).shift() - 1 : null; return { ...acc, ...createMediaQuery(min, max, key), ...createMediaQuery(null, max, `atLeast${upperKey}`), ...createMediaQuery(min, null, `atMost${upperKey}`), }; }, {}); |