xxx has "placeholder='blur'" property but is missing the "blurDataURL" property. about use-next-blurhash

[kikoanis]

yeah I have the same behavior. You only need to check for it in order to set placeholder correctly.
<Image src={imageUrl} blurDataURL={blurDataurl} placeholder={blurDataUrl ? 'blur' : 'empty'} .... />

Or you could start blurDataUrl with a generic fallback blurDataUrl

[rushi]

I had the same problem, I removed the code from the useEffect and it started working.

[ivansevillaa]

are you using the hook inside the useEffect? could you provide me a codesandbox or something to take a look, please

[SimonVillage]

I will see if I can provide an example later.

The problem is that blurDataURL has to be set to something, otherwise nextjs will throw an error if placeholder = blur.
Now blurDataURL is only set once useEffect runs. Those nextjs is complaining that it's not available / undefined.

[ivansevillaa]

Ahhh ok, and what about passing the prop blurData only if blurDataURL exists?

Another solution could be having a fallback, so if blurDataURL doesn´t exist, you pass the fallback.

blurDataURL ={blurDataURL ? blurDataURL : fallbackURL}

Tell me if some of this works

[SimonVillage]

Ahhh ok, and what about passing the prop blurData only if blurDataURL exists?

then it would cause an error as placeholder = 'blur' requires blurDataURL

I assume that your other solution would work but I think that this package somehow should handle this and adding a default fallbackURL could cause flickering on render.

[ivansevillaa]

Yes, you should pass the placeholder conditionally too.

Yes, I understand that. This package works well for static site generation. For the client side, I think flickering is inevitable if you get the URL in that mode.

Do you have an idea of how the package could handle that without providing a fallbackURL?

[kikoanis]

I think blurDataUrl would be better it was set by a state hook. Otherwise, consumers of this hook would not know if it has changed or not.

import { useEffect, useState } from 'react';

import { decode } from 'blurhash';
import { createCanvas } from 'canvas';

export function useBlurData(blurHash: string, width = 160, height = 120, punch?: number): [string] {
    const [blurDataUrl, setBlurDateUrl] = useState('');

    useEffect(() => {
        const pixels = decode(blurHash, width, height, punch);
        const canvas = createCanvas(width, height);
        const ctx = canvas.getContext('2d');
        const imageData = ctx.createImageData(width, height);
        imageData.data.set(pixels);
        ctx.putImageData(imageData, 0, 0);
        setBlurDateUrl(canvas.toDataURL());
    }, [blurHash, height, punch, width]);

    return [blurDataUrl];
}

[ivansevillaa]

Hi @kikoanis, thanks for the comment 😃 Just a question, why do you need to change the blurDataUrl

[kikoanis]

@ivansevillaa The blurDataUrl might take some time to be generated (however it is small) which might lead for it to be empty at the time of the first rendering. This is common with all async processes.

[ivansevillaa]

@kikoanis Are you ok with flickering? If you are ok, it is good for me. Could you create a PR?.
However, you will have this problem yet

I implemented it the same way as stated in the readme but I am getting the error that blurDataURL isn't set.
I assume that this is because useEffect is used so the blurDataURL is empty on render.

I think this best way to use the hook for client-side is just use a fallback url