rn-custom-style-sheet/lib/module/MediaQuery/Hooks/UseMediaQuery/UseMediaQuery.js

React Native component to select a specific value from a range of values.

import { useEffect } from 'react';
import { useDeepCompareMemo, useGuideLineBreakpoint } from '../../../Core';
import { matchMedia } from '../../Utils';
import { useIsUpdate } from '../UseIsUpdate';
import { makeQuery } from './UseMediaQueryUtils';
function useMediaQuery(settings, device, onChange) {
  const guideLineBreakpoint = useGuideLineBreakpoint();
  const query = useDeepCompareMemo(() => makeQuery(settings), [settings]);
  if (query === undefined || query === null || query?.trim() === '' || (query?.trim()?.length ?? 0) === 0) {
    throw new Error('Invalid or missing MediaQuery!');
  }
  const matchQuery = useDeepCompareMemo(() => matchMedia(query, device, guideLineBreakpoint), [query, device, guideLineBreakpoint]);
  const isUpdate = useIsUpdate();
  useEffect(() => {
    if (isUpdate) {
      onChange?.(matchQuery.isMatches);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [matchQuery.isMatches]);
  return matchQuery.isMatches;
}
export default useMediaQuery;
//# sourceMappingURL=UseMediaQuery.js.map