✨ add ref support to Container component

JohnsonMao · Oct 2, 2023 · aa02f87 · aa02f87
1 parent 20cf2f3
commit aa02f87
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,14 +1,18 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes, forwardRef } from 'react';
 import cn from '@/utils/cn';
 
 type ContainerProps = {
   as?: 'main' | 'header' | 'footer' | 'div';
 } & HTMLAttributes<HTMLElement>;
 
-function Container({ as = 'div', className, ...props }: ContainerProps) {
-  const Component = as;
+const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  function InternalContainer({ as = 'div', className, ...props }, ref) {
+    const Component = as;
 
-  return <Component className={cn('mx-auto', className)} {...props} />;
-}
+    return (
+      <Component className={cn('mx-auto', className)} ref={ref} {...props} />
+    );
+  }
+);
 
 export default Container;