simple-image-cloud-src-builder v1.0.1

Blurhash Decoder (simpleimagecloud.com)

React Example

yarn add simple-image-cloud-decode-blurhash

import decode from 'simple-image-cloud-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
        }}/>
    );
};