eae8557cf1
* add an xl breakpoint and use in member index view * expand search controls at medium breakpoint * tweak small screen layout options per breakpoint, add overflow button * small fix * switch where role appears depending on breakpoint * adjust for smallest layout * tweaks for medium layout * tweaks for large layout * tweaks for XL table
50 lines
1.1 KiB
JavaScript
50 lines
1.1 KiB
JavaScript
import { useState, useEffect } from 'preact/hooks';
|
|
|
|
/**
|
|
* Pre-defined breakpoints for width.
|
|
*
|
|
* Note: These were copied from _import.scss.
|
|
*/
|
|
export const BREAKPOINTS = Object.freeze({
|
|
Small: 640,
|
|
Medium: 768,
|
|
Large: 1024,
|
|
ExtraLarge: 1280,
|
|
});
|
|
|
|
/**
|
|
* A custom Preact hook for evaluating whether or not a CSS media query is matched or not.
|
|
*
|
|
* @param {string} query The media query to evaluate.
|
|
*
|
|
* @returns {boolean} True if the media query is matched, false otherwise.
|
|
*
|
|
* @example
|
|
* import { useMediaQuery } from '@components/useMediaQuery';
|
|
*
|
|
* function SomeComponent({ query }) {
|
|
* const matchesBreakpoint = useMediaQuery(query);
|
|
*
|
|
* if (!matchesBreakpoint) {
|
|
* return null;
|
|
* }
|
|
*
|
|
* return <SomeComponentThatMatchesMediaQuery />
|
|
* }
|
|
*/
|
|
export const useMediaQuery = (query) => {
|
|
const mediaQuery = window.matchMedia(query);
|
|
|
|
const [match, setMatch] = useState(!!mediaQuery.matches);
|
|
|
|
useEffect(() => {
|
|
const handler = () => {
|
|
setMatch(!!mediaQuery.matches);
|
|
};
|
|
mediaQuery.addListener(handler);
|
|
|
|
return () => mediaQuery.removeListener(handler);
|
|
});
|
|
|
|
return match;
|
|
};
|