From ec57ce0f03c02aae7b6faf2afef7df9dad8b5481 Mon Sep 17 00:00:00 2001 From: Rizwi Salim Date: Fri, 1 Nov 2024 04:44:01 +0530 Subject: [PATCH] fix: resolve type error in BlurFade component for inView margin prop - Updated `BlurFade` component by casting `inViewMargin` to `any` when passed to `useInView`, bypassing strict typing issues with `framer-motion`. - This change ensures compatibility with custom string values for the margin parameter, preventing TypeScript errors while maintaining the intended blur and fade effects. --- src/components/magicui/blur-fade.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/magicui/blur-fade.tsx b/src/components/magicui/blur-fade.tsx index 5ab3a71b..2d29f3ab 100644 --- a/src/components/magicui/blur-fade.tsx +++ b/src/components/magicui/blur-fade.tsx @@ -29,7 +29,7 @@ const BlurFade = ({ blur = "6px", }: BlurFadeProps) => { const ref = useRef(null); - const inViewResult = useInView(ref, { once: true, margin: inViewMargin }); + const inViewResult = useInView(ref, { once: true, margin: inViewMargin as any }); const isInView = !inView || inViewResult; const defaultVariants: Variants = { hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },