add as AppearInViewport prop #72

ukorvl · Sep 7, 2023 · d9dc348 · d9dc348
1 parent e9d383d
commit d9dc348
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
@@ -48,6 +48,7 @@ export default function GalleryPage() {
         <AppearInViewport
           className={titleCn}
           transition={{delay: 0.5, duration: TransitionDuration.LONG}}
+          as="h1"
         >
           SALSAVIVA GALLERY
         </AppearInViewport>
@@ -67,7 +68,10 @@ export default function GalleryPage() {
       </div>
       <Gallery />
       <div className={galleryTextItem}>
-        <AppearInViewport className={subTitleCn}>
+        <AppearInViewport
+          className={subTitleCn}
+          as="h3"
+        >
           Whant more? Follow us on social media!
         </AppearInViewport>
         <SocialIcons iconSize="2x" />

diff --git a/components/shared/AppearInViewport/AppearInViewport.tsx b/components/shared/AppearInViewport/AppearInViewport.tsx
@@ -1,21 +1,24 @@
 'use client';
 
 import {HTMLMotionProps, Variants, m} from 'framer-motion';
-import {ReactNode, forwardRef} from 'react';
+import {forwardRef} from 'react';
 import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-type SafeHTMLMotionProps = Omit<
-  HTMLMotionProps<'div'>,
+type As = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+type SafeHTMLMotionProps<T extends As = As> = Omit<
+  HTMLMotionProps<T>,
   'initial' | 'whileInView' | 'viewport' | 'ref'
 >;
 
 /**
  * Props.
  */
-type AppearOnScreenProps = {
-  children: ReactNode;
-} & SafeHTMLMotionProps;
+type AppearOnScreenProps<T extends As = As> = {
+  as?: T;
+} & SafeHTMLMotionProps<T>;
 
 const defaultVariants: Variants = {
   visible: {opacity: 1},
@@ -29,11 +32,13 @@ const defaultTransition = {duration: TransitionDuration.MEDIUM, delay: 0.3};
  * @returns React component.
  */
 const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(function AppearInViewport(
-  {children, variants, transition, ...rest},
+  {children, variants, transition, as = 'div', ...rest},
   ref,
 ) {
+  const Component = m[as];
+
   return (
-    <m.div
+    <Component
       initial="hidden"
       whileInView="visible"
       viewport={{once: true}}
@@ -43,7 +48,7 @@ const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(functio
       {...rest}
     >
       {children}
-    </m.div>
+    </Component>
   );
 });