fix: extended component without ref

askides · May 25, 2022 · c0453c1 · c0453c1
1 parent 72b6db9
commit c0453c1
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/libs/plock/src/Masonry/Masonry.tsx b/libs/plock/src/Masonry/Masonry.tsx
@@ -1,10 +1,10 @@
-interface MasonryProps {
+interface MasonryProps extends React.ComponentPropsWithoutRef<'div'> {
   columns: number;
   gap: string;
   children: React.ReactNode;
 }
 
-const Masonry = ({ children, columns, gap }: MasonryProps) => {
+const Masonry = ({ children, columns, gap, ...props }: MasonryProps) => {
   return (
     <div
       style={{
@@ -13,25 +13,27 @@ const Masonry = ({ children, columns, gap }: MasonryProps) => {
         columnGap: gap,
         alignItems: 'start',
       }}
+      {...props}
     >
       {children}
     </div>
   );
 };
 
-interface MasonryColumnProps {
+interface MasonryColumnProps extends React.ComponentPropsWithoutRef<'div'> {
   gap: string;
   children: React.ReactNode;
 }
 
-const MasonryColumn = ({ children, gap }: MasonryColumnProps) => {
+const MasonryColumn = ({ children, gap, ...props }: MasonryColumnProps) => {
   return (
     <div
       style={{
         display: 'grid',
         gridTemplateColumns: '100%',
         rowGap: gap,
       }}
+      {...props}
     >
       {children}
     </div>