https://github.com/mcnaveen/blurhash-base64

Turn blurhash to dataURL on the go.
https://github.com/mcnaveen/blurhash-base64

blurhash blurhash-nextjs next-image next-image-optimizer nextjs

Last synced: about 2 months ago
JSON representation

Turn blurhash to dataURL on the go.

• Host: GitHub
• URL: https://github.com/mcnaveen/blurhash-base64
• Owner: mcnaveen
• Created: 2023-09-13T13:14:09.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-14T07:18:35.000Z (over 1 year ago)
• Last Synced: 2024-10-16T05:11:07.601Z (2 months ago)
• Topics: blurhash, blurhash-nextjs, next-image, next-image-optimizer, nextjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/blurhash-base64
• Size: 1.76 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blurhash to Base64

:unicorn: Turn blurhash to dataURL on the go.

![Test](https://github.com/mcnaveen/blurhash-base64/workflows/Test/badge.svg)

![Downloads this Week](https://img.shields.io/npm/dw/blurhash-base64)

![Bundle Size](https://img.shields.io/bundlephobia/min/blurhash-base64)

![Version](https://img.shields.io/npm/v/blurhash-base64)

![Blurhash to DataURL](./image/cover.png)

### :package: Requirements

- Node.js 16X LTS or Higher 📦

### :sparkles: Installation

- Install the NPM Package with the below command:

```bash

#npm

npm install blurhash-base64

#yarn

yarn add blurhash-base64

#pnpm

pnpm add blurhash-base64

```

### :bulb: Usage Example for next/image component

- Import `blurhashToBase64` in your project

- Set the `placeholder` prop to `blur`

- And pass the blurhash to `blurDataURL` prop surrounded by `blurhashToBase64` (See below example)

```javascript

import Image from "next/image";

import { blurhashToBase64 } from "blurhash-base64"; // Import blurhashToBase64

export default function Home() {

  return (

    


      

    

  );

}

```


### :ballot_box_with_check: Demo

![Blurhash to DataURL](./image/demo.gif)

### :six_pointed_star: Credits

- Blurhash is Generated with [blurhash-from-url](https://www.github.com/mcnaveen/blurhash-from-url) - A library to generate the blurhash from the given URL.

- [Blurhash CLI](https://github.com/mcnaveen/blurhash-cli) - Generate Blurhash in CLI

#### :green_heart: Message

I hope you find this useful. If you have any questions, please create an issue.