Function useMediaQuery

src/useMediaQuery.ts:112–140

(
  settings: MediaQuerySettings,
  device?: MediaQueryMatchers,
  onChange?: (_: boolean) => void
)

}

const useMediaQuery = (
  settings: MediaQuerySettings,
  device?: MediaQueryMatchers,
  onChange?: (_: boolean) => void
) => {
  const deviceSettings = useDevice(device)
  const query = useQuery(settings)
  if (!query) throw new Error('Invalid or missing MediaQuery!')
  const mq = useMatchMedia(query, deviceSettings)
  const matches = useMatches(mq as unknown as MediaQueryList)
  const isUpdate = useIsUpdate()

  useEffect(() => {
    if (isUpdate && onChange) {
      onChange(matches)
    }
  }, [matches])

  useEffect(
    () => () => {
      if (mq) {
        mq.dispose()
      }
    },
    []
  )

  return matches
}

export default useMediaQuery