chore: fix types on component

yocontra · Sep 16, 2022 · c968860 · c968860
1 parent 54e46a8
commit c968860
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/dist/react-responsive.js b/dist/react-responsive.js
diff --git a/dist/react-responsive.js.map b/dist/react-responsive.js.map
diff --git a/dist/react-responsive.min.js.map b/dist/react-responsive.min.js.map
diff --git a/src/Component.ts b/src/Component.ts
@@ -1,11 +1,11 @@
 import useMediaQuery from './useMediaQuery';
-import { ReactNode, FC, CSSProperties } from 'react';
+import { ReactNode, ReactElement, FC, CSSProperties } from 'react';
 import { MediaQueryAllQueryable, MediaQueryMatchers } from './types';
 
 interface MediaQueryProps extends MediaQueryAllQueryable {
   component?: ReactNode
   // eslint-disable-next-line @typescript-eslint/ban-types
-  children?: ReactNode | Function;
+  children?: ReactNode | ((matches: boolean) => ReactNode);
   query?: string;
   style?: CSSProperties;
   className?: string;
@@ -15,6 +15,7 @@ interface MediaQueryProps extends MediaQueryAllQueryable {
   onChange?: (_matches: boolean) => void;
 }
 
+// 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,
@@ -24,9 +25,9 @@ const MediaQuery: FC<MediaQueryProps> = ({
   const matches = useMediaQuery(settings, device, onChange);
 
   if (typeof children === 'function') {
-    return children(matches);
+    return children(matches) as ReactElement;
   }
-  return matches ? children : null;
+  return matches ? children as ReactElement : null;
 };
 
 export default MediaQuery;