From 0b8cc2c12fb4eb9e4c3fbfb629c7769e8456f0c3 Mon Sep 17 00:00:00 2001
From: Chandelier Axel <axelchandelier0@gmail.com>
Date: Thu, 22 Jul 2021 18:05:02 +0200
Subject: [PATCH] chore: updated the react functionnal component type to
 FunctionalComponent rather than SFC

---
 examples/kitchen-sink/src/App.tsx | 14 +++++++-------
 src/DynamicResponsive.tsx         |  6 ++++--
 src/Media.tsx                     |  2 +-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/examples/kitchen-sink/src/App.tsx b/examples/kitchen-sink/src/App.tsx
index b453f97..c966489 100644
--- a/examples/kitchen-sink/src/App.tsx
+++ b/examples/kitchen-sink/src/App.tsx
@@ -35,7 +35,7 @@ const LargeStyle: CSSProperties = {
 }
 
 // From https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/
-const Img: React.SFC<
+const Img: React.FunctionComponent<
   { src: string; aspectRatio: number } & React.HTMLProps<HTMLSpanElement>
 > = ({ src, aspectRatio, style, ...props }) => (
   <span
@@ -63,7 +63,7 @@ const Img: React.SFC<
   </span>
 )
 
-export const App: React.SFC = () => (
+export const App: React.FunctionComponent = () => (
   <div>
     <div>
       <h1>
@@ -88,11 +88,11 @@ export const App: React.SFC = () => (
       </h1>
       <ul style={{ listStyleType: "none", padding: "0", margin: "0" }}>
         {/* prettier-ignore
-          *
-          * These line-items can’t be wrapped by a div, so use a render prop to
-          * receive the class name and a hint as to wether children should be
-          * rendered.
-          */}
+         *
+         * These line-items can’t be wrapped by a div, so use a render prop to
+         * receive the class name and a hint as to wether children should be
+         * rendered.
+         */}
         <Media lessThan="sm">
           {className => (
             <li className={className} style={ExtraSmallStyle}>
diff --git a/src/DynamicResponsive.tsx b/src/DynamicResponsive.tsx
index 5402d71..027a161 100644
--- a/src/DynamicResponsive.tsx
+++ b/src/DynamicResponsive.tsx
@@ -42,9 +42,11 @@ export function createResponsiveComponents<M extends string>() {
   const ResponsiveContext = React.createContext({})
   ResponsiveContext.displayName = "Media.DynamicContext"
 
-  const ResponsiveConsumer: React.SFC<
+  const ResponsiveConsumer: React.FunctionComponent<
     React.ConsumerProps<MediaQueryMatches<M>>
-  > = ResponsiveContext.Consumer as React.SFC<React.ConsumerProps<any>>
+  > = ResponsiveContext.Consumer as React.FunctionComponent<
+    React.ConsumerProps<any>
+  >
 
   return {
     Consumer: ResponsiveConsumer,
diff --git a/src/Media.tsx b/src/Media.tsx
index cdbac24..3833a98 100644
--- a/src/Media.tsx
+++ b/src/Media.tsx
@@ -338,7 +338,7 @@ export function createMedia<
   }>({ hasParentMedia: false, breakpointProps: {} })
   MediaContext.displayName = "MediaParent.Context"
 
-  const MediaContextProvider: React.SFC<
+  const MediaContextProvider: React.FunctionComponent<
     MediaContextProviderProps<BreakpointKey | Interaction>
   > = ({ disableDynamicMediaQueries, onlyMatch, children }) => {
     if (disableDynamicMediaQueries) {