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) →