Function MediaQuery

src/Component.ts:18–30

({
  children,
  device,
  onChange,
  ...settings
})

// ReactNode and ReactElement typings are a little funky for functional components, so the ReactElement cast is needed on the return
const MediaQuery: FC<MediaQueryProps> = ({
  children,
  device,
  onChange,
  ...settings
}) => {
  const matches = useMediaQuery(settings, device, onChange)

  if (typeof children === 'function') {
    return children(matches) as ReactElement
  }
  return matches ? (children as ReactElement) : null
}

export default MediaQuery