use-breakpoint
Version:
A React hook for getting the current responsive media breakpoint
35 lines (34 loc) • 1.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const createMediaQueries_js_1 = require("./createMediaQueries.js");
/**
* Get CSS native media queries for given breakpoint configuration.
* @param breakpoints the list of configured breakpoint names and their pixel values
*
* @example
* const breakpoints = { mobile: -1, tablet: 768, desktop: 1280 }
* const queries = getCSSMediaQueries(breakpoints)
* // {
// "mobile": "@media (max-width: 767px)",
// "tablet": "@media (min-width: 768px) and (max-width: 1279px)",
// "desktop": "@media (min-width: 1280px)",
// }
*
* @example <caption>Targeting only screen</caption>
* const breakpoints = { mobile: -1, tablet: 768, desktop: 1280 }
* const queries = getCSSMediaQueries(breakpoints, 'screen')
* // {
// "mobile": "@media only screen (max-width: 767px)",
// "tablet": "@media only screen (min-width: 768px) and (max-width: 1279px)",
// "desktop": "@media only screen (min-width: 1280px)",
// }
*/
const getCSSMediaQueries = (breakpoints, type) => {
const typePrefix = type ? `only ${type} and ` : '';
const queries = (0, createMediaQueries_js_1.default)(breakpoints);
return queries.reduce((queries, { breakpoint, query }) => ({
...queries,
[breakpoint]: `@media ${typePrefix}${query}`,
}), {});
};
exports.default = getCSSMediaQueries;