Merge pull request #2317 from xg4/fix-type

fix: resolve @types/react@18 break change, React.FC

Author: streamich

src/factory/createReducerContext.ts

@@ -10,9 +10,12 @@ const createReducerContext = <R extends React.Reducer<any, any>>(
     );
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
-  const ReducerProvider: React.FC<{ initialState?: React.ReducerState<R> }> = ({
+  const ReducerProvider = ({
     children,
     initialState,
+  }: {
+    children?: React.ReactNode;
+    initialState?: React.ReducerState<R>;
   }) => {
     const state = useReducer<R>(
       reducer,

src/factory/createStateContext.ts

@@ -5,7 +5,13 @@ const createStateContext = <T>(defaultInitialValue: T) => {
     createContext<[T, React.Dispatch<React.SetStateAction<T>>] | undefined>(undefined);
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
-  const StateProvider: React.FC<{ initialValue?: T }> = ({ children, initialValue }) => {
+  const StateProvider = ({
+    children,
+    initialValue,
+  }: {
+    children?: React.ReactNode;
+    initialValue?: T;
+  }) => {
     const state = useState<T>(initialValue !== undefined ? initialValue : defaultInitialValue);
     return providerFactory({ value: state }, children);
   };

src/useMedia.ts

@@ -10,7 +10,7 @@ const getInitialState = (query: string, defaultState?: boolean) => {
   if (isBrowser) {
     return window.matchMedia(query).matches;
   }
-  
+
   // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
   if (process.env.NODE_ENV !== 'production') {
     console.warn(

stories/useHarmonicIntervalFn.story.tsx

@@ -3,7 +3,12 @@ import * as React from 'react';
 import { useHarmonicIntervalFn, useInterval, useTimeoutFn } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+const Clock = ({
+  useInt,
+}: {
+  children?: React.ReactNode;
+  useInt: typeof useHarmonicIntervalFn;
+}) => {
   const [count, setCount] = React.useState(0);
   useInt(() => {
     setCount((cnt) => cnt + 1);
@@ -25,7 +30,7 @@ const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) =
   return <div style={style}>{m + ':' + s}</div>;
 };
 
-const Demo: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+const Demo = ({ useInt }: { children?: React.ReactNode; useInt: typeof useHarmonicIntervalFn }) => {
   const [showSecondClock, setShowSecondClock] = React.useState(false);
   useTimeoutFn(() => {
     setShowSecondClock(true);

stories/useMouse.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMouse } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = () => {
+const Demo = () => {
   const ref = React.useRef(null);
   const state = useMouse(ref);
 

stories/useMouseHovered.story.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useMouseHovered } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = ({ whenHovered, bound }) => {
+const Demo = ({ whenHovered, bound }: any) => {
   const ref = React.useRef(null);
   const state = useMouseHovered(ref, { whenHovered, bound });
 

stories/useMouseWheel.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMouseWheel } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = () => {
+const Demo = () => {
   const mouseWheel = useMouseWheel();
   return (
     <>

tests/createReducerContext.test.tsx

@@ -33,7 +33,7 @@ describe('when using created hook', () => {
 
   const setUp = () => {
     const [useSharedNumber, SharedNumberProvider] = createReducerContext(reducer, 0);
-    const wrapper: React.FC = ({ children }) => (
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
       <SharedNumberProvider>{children}</SharedNumberProvider>
     );
     return renderHook(() => useSharedNumber(), { wrapper });

tests/createStateContext.test.tsx

@@ -18,7 +18,9 @@ describe('when using created hook', () => {
 
   const setUp = () => {
     const [useSharedText, SharedTextProvider] = createStateContext('init');
-    const wrapper: React.FC = ({ children }) => <SharedTextProvider>{children}</SharedTextProvider>;
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <SharedTextProvider>{children}</SharedTextProvider>
+    );
     return renderHook(() => useSharedText(), { wrapper });
   };