diff --git a/package.json b/package.json index 8bb0e21..349df26 100644 --- 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 ", "license": "MIT", diff --git a/src/lib/handleViewport.tsx b/src/lib/handleViewport.tsx index e867dba..5604955 100644 --- 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 index cf9ef05..9612c2f 100644 --- 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 | undefined; - }) => ( -
-
-

{titleText}

-
-
{contentNode}
-
- ), -); +export class Card extends React.PureComponent<{ + titleText: string; + contentNode: React.ReactNode; + forwardedRef?: React.Ref | undefined; +}> { + static displayName = 'Card'; -Card.displayName = 'Card'; + render() { + const { titleText, contentNode, forwardedRef } = this.props; + return ( +
+
+

{titleText}

+
+
{contentNode}
+
+ ); + } +} export function Block(props) { const {