static-uploader-decode-blurhash

Blurhash Decoder (staticuploader.com)

React Example

yarn add static-uploader-decode-blurhash

import decode from 'static-uploader-decode-blurhash';
import {
    useEffect,
    useState
} from 'react';

export default () => {
    const [
        background,
        setBackground
    ] = useState('');

    /* will generate a base 64 encoded image with 32px by 32px */
    useEffect(() => {
        setBackground(decode('LGF5]+Yk^6#M@-5c,1J5@[or[Q6.'));
    }, []);

    /* then use it with background-image and background-size: cover */
    return (
        <div style={{
            backgroundImage: `url(${background})`,
            backgroundSize: 'cover',
            width: 400,
            height: 400
        }}/>
    );
};