From aef625e7208ae643836eac84ddcd0e64514be8fa Mon Sep 17 00:00:00 2001
From: Alejandro Cruz Ballestero <132664410+alecb6@users.noreply.github.com>
Date: Tue, 25 Mar 2025 10:54:28 +0000
Subject: [PATCH] fix: MetallicPaint import texts, and useState management
---
.../code/Animations/metallicPaintCode.js | 26 ++++++++++---------
1 file changed, 14 insertions(+), 12 deletions(-)
diff --git a/src/constants/code/Animations/metallicPaintCode.js b/src/constants/code/Animations/metallicPaintCode.js
index 041c4a36..136178b8 100644
--- a/src/constants/code/Animations/metallicPaintCode.js
+++ b/src/constants/code/Animations/metallicPaintCode.js
@@ -8,7 +8,7 @@ import tsTailwind from '@ts-tailwind/Animations/MetallicPaint/MetallicPaint.tsx?
export const metallicPaint = {
...(generateCliCommands('Animations/MetallicPaint')),
- usage: `import MetallicPaint, { parseLogoImage } from "./MetallicPaint";'
+ usage: `import MetallicPaint, { parseLogoImage } from "./MetallicPaint";
import { useState, useEffect } from 'react';
// replace with your own SVG
@@ -17,7 +17,7 @@ import { useState, useEffect } from 'react';
import logo from '../../assets/logos/react-bits-solid-black.svg';
const Component = () => {
- const [imageData, setImageData] = useState(null);
+ const [imageData, setImageData] = useState<ImageData | null>(null);
useEffect(() => {
async function loadDefaultImage() {
@@ -25,28 +25,30 @@ const Component = () => {
const response = await fetch(logo);
const blob = await response.blob();
const file = new File([blob], "default.png", { type: blob.type });
- const { imageData } = await parseLogoImage(file);
- setImageData(imageData);
+
+ const parsedData = await parseLogoImage(file);
+ setImageData(parsedData?.imageData ?? null);
+
} catch (err) {
console.error("Error loading default image:", err);
}
}
-
+
loadDefaultImage();
}, []);
return (
<div style={{ width: '100%', height: '100vh' }}>
<MetallicPaint
- imageData={imageData}
+ imageData={imageData ?? new ImageData(1, 1)}
params={{ edge: 2, patternBlur: 0.005, patternScale: 2, refraction: 0.015, speed: 0.3, liquid: 0.07 }}
/>
</div>
);
}`,
- code,
- css,
- tailwind,
- tsCode,
- tsTailwind
-}
\ No newline at end of file
+code,
+css,
+tailwind,
+tsCode,
+tsTailwind
+};
\ No newline at end of file