Easily include Blurhash placeholders in your React projects with react-blurhash

react-blurhash allows you to easily integrate Blurhash Placeholder Images images in your React Projects:

Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.

Installation per NPM

npm install --save blurhash react-blurhash

Example Usage:

import './App.css';
import { Blurhash } from "react-blurhash";


function App() {
  return (
    <div className="App">
      <Blurhash
        hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"
        width={600}
        height={400}
      />

      <img
        src="https://example.org/original.jpg"
        width={600}
        height={400}
      />
    </div>
  );
}

export default App;

react-blurhash (GitHub) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

  1. Thank you very much been, looking through hundreds of websites trying to learn this and you finally taught me.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.