Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/woltapp/react-blurhash
React components for blurhash
https://github.com/woltapp/react-blurhash
Last synced: about 2 months ago
JSON representation
React components for blurhash
- Host: GitHub
- URL: https://github.com/woltapp/react-blurhash
- Owner: woltapp
- Created: 2019-06-29T11:39:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T08:24:59.000Z (almost 2 years ago)
- Last Synced: 2024-05-22T04:42:44.560Z (7 months ago)
- Language: TypeScript
- Size: 1.93 MB
- Stars: 571
- Watchers: 4
- Forks: 19
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# react-blurhash
[](https://www.npmjs.com/package/react-blurhash)
[](https://npmcharts.com/compare/react-blurhash?minimal=true)
> React components for using the [blurhash algorithm](https://blurha.sh) in your React projects
[Demo](https://woltapp.github.io/react-blurhash/)
## Install
```sh
npm install --save blurhash react-blurhash
```
## Usage
### ``
```js
import { Blurhash } from "react-blurhash";
```
### Description
`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.
#### Props
| name | description |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `hash` (string) | The encoded blurhash string. |
| `width` (int \| string) | Width (CSS) of the decoded image. |
| `height` (int \| string) | Height (CSS) of the decoded image. |
| `resolutionX` (int) | The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
| `resolutionY` (int) | The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
| `punch` (int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
#### Example
```jsx
```
### ``
```js
import { BlurhashCanvas } from "react-blurhash";
```
### Description
`BlurhashCanvas` is the barebones implementation of a blurhash string to a canvas. You may want to use it instead of the `Blurhash` component e.g. if you want to control the scaling yourself.
#### Props
| name | description |
| --------------- | --------------------------------------------------------------------------------------- |
| `hash` (string) | The encoded blurhash string. |
| `width` (int) | Width of the decoded image. |
| `height` (int) | Height of the decoded image. |
| `punch` (int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
#### Example
```jsx
```
## Browser support
Blurhash depends on `Uint8ClampedArray`, which is supported on all mainstream browsers and >=IE11.