Allow passing class component (#104)

* Allow passing class component
roderickhsiao · Mar 30, 2022 · 8646cff · 8646cff
1 parent 063f58d
commit 8646cff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-in-viewport",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.24",
   "description": "Track React component in viewport using Intersection Observer API",
   "author": "Roderick Hsiao <roderickhsiao@gmail.com>",
   "license": "MIT",

diff --git a/src/lib/handleViewport.tsx b/src/lib/handleViewport.tsx
@@ -18,7 +18,7 @@ const isReactComponent = (Component) => {
 };
 
 function handleViewport(
-  TargetComponent: React.ElementType,
+  TargetComponent: React.ElementType | React.ComponentClass,
   options: Options = defaultOptions,
   config: Config = defaultConfig,
 ) {

diff --git a/src/stories/common/themeComponent.tsx b/src/stories/common/themeComponent.tsx
@@ -26,26 +26,25 @@ export const PageTitle = memo(
 );
 PageTitle.displayName = 'PageTitle';
 
-export const Card = memo(
-  ({
-    titleText,
-    contentNode,
-    forwardedRef,
-  }: {
-    titleText: string;
-    contentNode: React.ReactNode;
-    forwardedRef?: React.Ref<any> | undefined;
-  }) => (
-    <div className="card" ref={forwardedRef}>
-      <div className="card__head">
-        <h3 className="card__title">{titleText}</h3>
-      </div>
-      <div className="card__conent">{contentNode}</div>
-    </div>
-  ),
-);
+export class Card extends React.PureComponent<{
+  titleText: string;
+  contentNode: React.ReactNode;
+  forwardedRef?: React.Ref<any> | undefined;
+}> {
+  static displayName = 'Card';
 
-Card.displayName = 'Card';
+  render() {
+    const { titleText, contentNode, forwardedRef } = this.props;
+    return (
+      <div className="card" ref={forwardedRef}>
+        <div className="card__head">
+          <h3 className="card__title">{titleText}</h3>
+        </div>
+        <div className="card__conent">{contentNode}</div>
+      </div>
+    );
+  }
+}
 
 export function Block(props) {
   const {