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

This content originally appeared on Bram.us and was authored by Bramus!

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

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate

APA

Bramus! | Sciencx (2023-10-03T04:21:12+00:00) » Easily include Blurhash placeholders in your React projects with react-blurhash. Retrieved from https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/.

MLA

" » Easily include Blurhash placeholders in your React projects with react-blurhash." Bramus! | Sciencx - Monday February 1, 2021, https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/

HARVARD

Bramus! | Sciencx Monday February 1, 2021 » Easily include Blurhash placeholders in your React projects with react-blurhash., viewed 2023-10-03T04:21:12+00:00,<https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/>

VANCOUVER

Bramus! | Sciencx - » Easily include Blurhash placeholders in your React projects with react-blurhash. [Internet]. [Accessed 2023-10-03T04:21:12+00:00]. Available from: https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/

CHICAGO

" » Easily include Blurhash placeholders in your React projects with react-blurhash." Bramus! | Sciencx - Accessed 2023-10-03T04:21:12+00:00. https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/

IEEE

" » Easily include Blurhash placeholders in your React projects with react-blurhash." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/. [Accessed: 2023-10-03T04:21:12+00:00]

rf:citation

» Easily include Blurhash placeholders in your React projects with react-blurhash | Bramus! | Sciencx | https://www.scien.cx/2021/02/01/easily-include-blurhash-placeholders-in-your-react-projects-with-react-blurhash/ | 2023-10-03T04:21:12+00:00