React bindings for blurhash-as
npm install react-blurhash-as> React bindings for blurhash-as
  
``bash`
npm install --save blurhash-as react-blurhash-as
`bash`
yarn add blurhash-as react-blurhash-as
Since the decoding process runs on the client, Blurhash components uses the blurhash-as/browser. As a peer dependency, you must call the blurhash.setURL to define the WASM source. This must be called before any usage of Blurhash.
`tsx
import * as blurhash from 'blurhash-as/browser';
// Setup WASM URL, must be called as early as possible
blurhash.setURL(blurhashWASMURL);
`
Blurhash provides a way to lazily render images and at the same time, render the placeholders before the images.
`tsx
import { Blurhash } from 'react-blurhash-as';
// Render a lazy image w/ a Blurhash
src={imageSrc}
alt="This is an image"
hash={blurhash}
width={imageWidth}
height={imageHeight}
punch={punchValue} // Optional
// For "css" and "svg" modes, you can provide
// filter and blur values
filter={filterValue} // Defaults to 20px
scale={scaleValue} // Defaults to 1.2
// For "image" mode, you can provide format
// and quality values
format="image/png" // "image/jpeg" or "image/webp"
quality={0.9} // Implementation-wise, defaults to 0.92
onLoad={onLoad}
/>
`
In some circumstances, we want to handle the placeholder logic alone, BlurhashPlaceholder renders only the placeholder and not the source image.
`tsx
import { BlurhashPlaceholder } from 'react-blurhash-as';
// Take note that placeholders are responsive and attempts
// to fill the width and height. Aspect Ratio boxes
// work great here.
// For "css" and "svg" modes, you can provide
// filter and blur values
filter={filterValue} // Defaults to 20px
scale={scaleValue} // Defaults to 1.2
// For "image" mode, you can provide format
// and quality values
format="image/png" // "image/jpeg" or "image/webp"
quality={0.9} // Implementation-wise, defaults to 0.92
onLoad={onLoad}
/>
$3
If you want to use the lazy-loading mechanism of
while providing your own placeholder, you can use BlurhashContainer.`tsx
import { BlurhashContainer } from 'react-blurhash-as';
alt="This is an image"
width={imageWidth}
height={imageHeight}
>
{
(visible, showPlaceholder) => (
// placeholder should render
visible={visible}
// showPlaceholder notifies the image to
// begin rendering after the placeholder
// has successfully rendered.
showPlaceholder={showPlaceholder}
/>
)
}
`Static Rendering
Use
to handle the pre-rendered placeholders, in contrast with Blurhash which renders the placeholders. This is useful in combination with plugins that renders these placeholders during build-time or for SSR.Compared to
BlurhashStatic, the placeholders are not lazily-rendered.`tsx
import { BlurhashStatic } from 'react-blurhash-as';
src={imageSrc}
alt="This is an image"
placeholder={cssPlaceholder}
width={imageWidth}
height={imageHeight}
/>
`$3
tsx
import { BlurhashStaticPlaceholder } from 'react-blurhash-as';
mode="css" // "svg" or "image"
placeholder={placeholder}
width={width}
height={height}
/>
`$3
Similar to
however, the placeholder is not lazily-rendered.Styling
react-blurhash-as provides the following class names:-
blurhash-as__aspect-ratio-box: The outer container of the Blurhash component, this retains the aspect ratio.
- blurhash-as__aspect-ratio-content: The inner container of the Blurhash component.
- blurhash-as__image-container: This allows the image and the placeholder to overlap.
- blurhash-as__image: The image.
- blurhash-as__placeholder`: The placeholderAfter the image has loaded, the image and the placeholder changes opacity. This is useful if you want to provide transitions when the image is displayed.
MIT © lxsmnsyc